@charset "UTF-8";

/* Stand: Samstag, 12. Oktober 2019 14:15 Uhr */



/*
	Zurücksetzen aller Browservoreinstellungen 
	bezüglich der Abstände und Rahmen
*/

* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	word-wrap: break-word;
	word-break: keep-all; }
/* box-sizing border-box ist wichtig */

img {
	border: none; }

html, body {
	background-color: rgb(245,245,245); }

p, ul {
	ms-hyphens: auto;
	webkit-hyphens: auto;
	hyphens: auto; }

strong {
	font-weight: bold; }

em {
	font-style: italic; }


hr.trenner {
	display: none; }
/*
	Die hr tauchen nur auf Mobilgeräten am unteren Rand von Textblöcken
	auf und sorgen dort für eine Trennung der Textblöcke, wenn diese
	aneinanderstoßen. Wenn ein Teaser-Bild folgt, kommen sie nicht zum
	Einsatz.
*/



/* Grundsätzliches Design auf großen Bildschirmen */
div.haupt {
	position: relative;
	width: auto;
	max-width: 61.25em; /* entspricht 980px bei 1em = 16px */
	height: auto;
	padding: 0;
	margin: 0 auto; }

/*
	Content-Spalte mit der unsichtbaren Content-Spalte drin wird auch
	auf großen Bildschirmen nicht breiter als 990px und dann mittig
	dargestellt (margin 0 auto)
*/

div.content {
	width: 100%;
	height: auto; }



/* Hauptnavigation in Header mit Hauptüberschrift; die h1 kommt nur im Header vor */

div.header {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 180px;
	padding-left: 40px;
	padding-top: 127px;
	padding-right: 60px;
	padding-bottom: 33px;
	margin-top: 20px;
	background-color: rgb(255,255,255);
	z-index: 1001; }
/*
	Der Headerstreifen muss auf mobilen Geräten einen hohen z-index haben,
	damit die Karusselle, die direkt darunter liegen, beim Hochscrollen
	nicht über den fixierten Headerstreifen scrollen. z-index wird nämlich
	auch im Stylesheet des jQuery-Plugins Slick verwendet. Auf großen Desktop-
	Bildschirmen wäre das zwar nicht nötig und hat auch keine sichtbaren
	Auswirkungen, aber die hier gemachte Definition gilt ja runter bis zum
	kleinsten Bildschirm, wenn ich sie in einer der Media Queries nicht
	ändere/variiere.
*/


h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.75em;
	font-weight: bold;
	color: rgb(51,51,51);
	text-transform: uppercase;
	font-variant: normal;
	letter-spacing: 1px;
	word-spacing: normal;
	-webkit-font-smoothing: antialiased;
	line-height: 1.0em; }
/* dies sind die Formatierungen für .LucidaHeadline bis auf line-height */


div.header_links {
	float: left;
	width: 50%;
	height: 20px;
	text-align: left; }

div.header_rechts {
	float: right;
	width: 50%;
	height: 20px;
	text-align: right; }

ul#hauptnavi li {
	display: inline;
	margin-right: 0.54em;
	line-height: 1.9em; }


/* Schrift und Links in der Hauptnavigation */
.LucidaMenue {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	font-size: 0.9375em;
	color: rgb(51,51,51);
	font-weight: normal;
	letter-spacing: normal;
	word-spacing: normal;
	-webkit-font-smoothing: antialiased; }

.aktiv {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	font-size: 0.9375em;
	color: #58667E;
	font-weight: normal;
	letter-spacing: normal;
	word-spacing: normal;
	-webkit-font-smoothing: antialiased; }
/* Farbe von .LucidaMenue_Rot! */

a.LucidaMenue:link {
	text-decoration: none;
	color: #333333; }

a.LucidaMenue:visited {
	text-decoration: none; 
	color: #333333; }

a.LucidaMenue:focus {
	text-decoration: underline;
	color: #000000; }

a.LucidaMenue:hover {
	text-decoration: underline;
	color: #000000; }

a.LucidaMenue:active {
	color: #CC3300;
	text-decoration: underline;
	text-align: right; }

a.aktiv:link {
	text-decoration: none; 
	color: #58667E; }

a.aktiv:visited {
	text-decoration: none; 
	color: #58667E; }

a.aktiv:focus {
	text-decoration: none; 
	color: #58667E; }

a.aktiv:hover {
	text-decoration: none; 
	color: #58667E; }

a.aktiv:active {
	text-decoration: none; 
	color: #58667E; }


/* Subnavigation für Portfolio auf Startseite */

div.subnavi {
	width: 100%;
	padding-left: 40px;
	padding-bottom: 20px;
	margin-top: 20px;
	background-color: rgb(255,255,255); }

ul.subnavi_haupt {
	display: inline-block;
	list-style-type: none; }

.subnavi_haupt li {
	display: inline-block;
	padding-right: 1.4em; }

ul.subnavi_unter {
	vertical-align: top;
	list-style-type: none; }

ul.subnavi_unter li {
	display: block; }

/* Stefans Formatierung für die Überschriften in der Subnavi plus meine Margin-Regeln */
p.LucidaMenue_Rot {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	font-size: 0.9375em;
	color: rgb(88,102,126);
	-webkit-font-smoothing: antialiased;
	margin-top: 1.4em;
	margin-bottom: 1.2em; }

.sichtbar_mobil {
	display: none; }

.sichtbar_mobil2 {
	display: none; }

.unsichtbar_mobil {
	display: inline; }

.sichtbar_desktop {
	display: inline; }



/* 100% breite Abbildungen direkt unter dem Header bzw. unter dem Submenü für das Portfolio */
div.abbildung_big, div.karussell_start, div.karussell_big {
	margin-top: 20px; }


/* TO DO: hier fehlen die verschieden großen bildversionen, die je nach bedarf ein- oder ausgeblendet werden */


/* Karusselle mit jQuery-Plugin Slick, JavaScript-Konfiguration siehe Startseite */

.slider {
	width: 100%;
	margin: 0px auto;
	padding: 0; }

.slick-slide {
	margin: 0px; }

.slick-slide img {
	width: 100%; }

.slick-prev:before, .slick-next:before {
	color: black; }

.slick-slide {
	transition: all ease-in-out 0.3s;
	opacity: 0.3; }
    
.slick-active {
	opacity: 0.5; }

.slick-current {
	opacity: 1.0; }



/* Fließtextinhalte in ein oder (bei Tablet-, Laptop- und Desktop-Ansicht)
höchstens zwei Spalten -- auf Smartphone gibt es generell nur eine Spalte */


/* Text-Container */

div.einspaltig {
	width: 100%;
	margin-top: 20px; 
	background-color: rgb(255,255,255);
	padding: 24px 40px 24px 40px;
	height: auto; }
/* Auf Desktop haben die Textblöcke nach links und rechts je 40px padding
beim ersten Breakpoint für Mobilgeräte werden es 30px, dann 24, dann 20. */

div.einspaltig p {
	padding: 5px 0px 5px 0px; }

div.zweispaltig {
	width: 100%;
	margin-top: 20px; 
	background-color: rgb(255,255,255);
	padding: 20px;
	height: auto; }
/* Zweispaltige div-Container haben Padding 20px */
/*
	Das Padding ist links und rechts geringer als 40px, da die innenliegenden
	Elemente (tables mit Paragraphs in den td) bei Zweispaltigkeit links und
	rechts weiteres Padding hinzufügen, damit ein Steg zwischen linker und rechter
	Spalte dargestellt wird. Links außen und rechts außen addiert sich das
	sichtbare Padding so wieder auf 40px, auch der Steg in der Mitte hat in
	der Desktop-Version 40px.
*/

div.zweispaltig p {
	padding: 4px 20px 14px 20px; }
/* In div.zweispaltig kommen p nur in td vor, muss also nicht präziser formuliert werden. */


p.LucidaTextGrossEN.weit, .LucidaTextGross.weit {
	padding: 16px 20px 18px 20px; }
/* Betrifft nur Absätze, über denen keine Überschrift steht
Beispiel: biografie.html bzw. About ganz oben, zweispaltiger Textblock */




/* Zweispaltige Tabellen, Spalten je 50% Breite */
.zweispaltig table.zwei_sp50_50 {
	display: block;
	border-collapse: separate;
 	border-spacing: 0px; }

.zweispaltig table.zwei_sp50_50 tr td {
	margin: 0;
	padding: 0;
	vertical-align: top;
	width: 50%; }


/* Nur für die Publikationsseite, wo links Coverabbildlungen stehen,
ansonsten haben zweispaltige Tabellen links und rechts nur Text.*/
.zweispaltig table.zwei_sp50_50 tr td img.cover {
	width: 100%;
	height: auto; }

.LucidaFett {
	font-weight: bold;
	font-size: 13px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #333333;
	line-height: 21px;
	-webkit-font-smoothing: antialiased; }
/* Schrift mit dieser Klasse wird, soweit ich sehe, nur in der Publikationsseite verwendet */


/* Zweispaltige Tabellen, linke Spalte 60% breit, rechte Spalte 40% breit */
.zweispaltig table.zwei_sp60_40 {
	display: block;
	border-collapse: separate;
 	border-spacing: 0px; }

.zweispaltig table.zwei_sp60_40 tr td.links60 {
	margin: 0;
	padding: 0;
	vertical-align: top;
	width: 60%; }

.zweispaltig table.zwei_sp60_40 tr td.rechts40 {
	margin: 0;
	padding: 0;
	vertical-align: top;
	width: 40%; }



/* Fließtext englisch und deutsch für div.einspaltig und div.zweispaltig */

.LucidaTextGrossEN {
	font-size: 0.9375em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(105,120,139);
	line-height: 1.48em;
	-webkit-font-smoothing: antialiased; }

.LucidaTextGross {
	font-size: 0.9375em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(0,0,0);
	line-height: 1.48em;
	-webkit-font-smoothing: antialiased; }

.LucidaTextGross_kursiv {
	font-size: 0.875em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(54,48,40);
	line-height: 1.48em;
	font-style: italic;
	-webkit-font-smoothing: antialiased; }



/* Überschriften h2 deutsch und englisch, für einspaltige div-Container */

.einspaltig h2.LucidaFettHead {
	font-weight: bold;
	font-size: 1.5em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(51,51,51);
	-webkit-font-smoothing: antialiased;
	margin-top: 10px;
	margin-bottom: 1.1em; }

span.LucidaFettHeadEN {
	font-weight: bold;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(105,120,139);
	-webkit-font-smoothing: antialiased; }
/*
	Soll als Überschrift wirken, aber keinen eigenen Absatz bilden, deshalb span innerhalb
	h2, siehe CV; Auf keinen Fall eine Angabe zur Schriftgröße in em machen – da der span
	innerhalb einer h2 liegt, die schon eine Schriftgröße definiert hat, würde eine em-
	Angabe größer 1.0 eine Potenzierung der Größe bedeuten! em ist ein Wert bezogen auf
	Elternelemente, in diesem Fall die h2 mit 1.5em, die wiederum auf body bezogen sind,
	vermutlich.
*/



/*
	Überschriften für die Portfolio-Unterseiten, manchmal
	mit kursivem Absatz darüber, manchmal nicht
*/
.zweispaltig .Lucida_Preise {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	font-size: 0.688em;
	color: rgb(182,46,87);
	font-weight: normal;
	line-height: 0.5em;
	font-style: italic;
	line-height: 1.2em;
	padding-top: 0.0em; }

.zweispaltig h2.LucidaFettHead {
	font-weight: bold;
	font-size: 1.5em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(51,51,51);
	-webkit-font-smoothing: antialiased;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 12px;
	margin-bottom: 0.9em;
	line-height: 1.3em; }
/*
	Formatierung der h2, wenn über der h2 KEIN Absatz .Lucida_Preise steht,
	der Mechanismus wird erst unten in den Media Queries klar
*/

.zweispaltig h2.LucidaFettHead.Mit_Preis {
	font-weight: bold;
	font-size: 1.5em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(51,51,51);
	-webkit-font-smoothing: antialiased;
	margin-top: -12px;
	padding-left: 20px;
	margin-bottom: 0.9em; }
/*
	Formatierung der h2, WENN auf einen Absatz .Lucida_Preise eine h2 folgt,
	der Mechanismus wird erst unten in den Media Queries klar
*/



/* Überschriften h3 deutsch und englisch */

/* h3 außerhalb Tabellen, z.B. in einspaltigen div, z.B. in ABOUT */
h3.LucidaFettGrossEN {
	font-weight: bold;
	font-size: 1.0em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(105,120,139);
	line-height: 1.48em;
	-webkit-font-smoothing: antialiased; }

h3.LucidaFettGross {
	font-weight: bold;
	font-size: 1.0em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(0,0,0);
	line-height: 1.48em;
	-webkit-font-smoothing: antialiased;
	margin-bottom: 1em; }


h3.LucidaFettKont {
	font-weight: bold;
	font-size: 1.0em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(0,0,0);
	line-height: 1.48em;
	-webkit-font-smoothing: antialiased;
	margin-top: 1.2em; }
/* Nur auf Seite Kontakt */


/* h3 innerhalb Tabellen, z.B. in der Sektion Kontext … Autor usw. in den
Portfolio-Unterseiten */
table.zwei_sp50_50 h3.LucidaFettGrossEN {
	font-size: 0.9375em; 
	font-weight: bold;
	color: rgb(105,120,139);
	line-height: 1.3em;
	padding-top: 0.7em;
	padding-bottom: 0px;
	margin: 0px;
	padding-left: 20px;
	-webkit-font-smoothing: antialiased; }

table.zwei_sp50_50 h3.LucidaFettGross {
	font-size: 0.9375em; 
	font-weight: bold;
	color: rgb(0,0,0);
	line-height: 1.3em;
	padding-top: 0.7em;
	padding-bottom: 0px;
	margin: 0px;
	padding-left: 20px;
	-webkit-font-smoothing: antialiased; }


/* Für die zwei Textunterseiten zu Biografie */
table.zwei_sp50_50 tr td .bio_unter {
	font-size: 1.1em; 
	line-height: 1.3em;
	padding-top: 0.8em;
	padding-bottom: 0.7em; }


/* Sonderlösungen für die Seite Publikationen */
table.zwei_sp50_50.bild_text {
	padding-top: 0.6em; }

table.zwei_sp50_50 tr td .pub_h3 {
	font-size: 1.1em; 
	line-height: 1.3em;
	padding-top: 0.2em;
	padding-bottom: 0.7em; }





/* NUR Seite biografie.html bzw. About */
div.einspaltig ul.cv {
	list-style-type: none;
	margin-bottom: 1.2em; }

ul.cv li {
	font-size: 0.9375em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: rgb(0,0,0);
	line-height: 1.44em;
	letter-spacing: normal;
	padding-bottom: 0.5em;
	-webkit-font-smoothing: antialiased; }

/* Projektkooperationen unten in biografie.html bzw. About */
.KontextArial {
	font-size: 11px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	line-height: 20px;
	font-weight: normal;
	color: rgb(0,0,0);
	-webkit-font-smoothing: antialiased;
	padding-top: 10px; }

.KontextArialEN {
	font-size: 11px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	line-height: 20px;
	font-weight: normal;
	color: #8A94A3;
	-webkit-font-smoothing: antialiased; }

.ArialKleinLink {
	color: #CC0000;
	text-decoration: none; }

.ArialKleinLink:link {
	color: #363028;
	text-decoration: none; }

.ArialKleinLink:visited {
	color: #363028;
	text-decoration: none; }

.ArialKleinLink:hover {
	color: #FFFFFF;
	background-color: #556171; }



/* NUR in Seite aktuell.html bzw. News */
h2.LucidaFettSub {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	font-size: 1.0625em;
	font-weight: bold;
	line-height: 1.44em;
	color: rgb(54,48,40);
	-webkit-font-smoothing: antialiased;
	margin-bottom: 0.9em;
	margin-top: 0.6em; }

.zweispaltig h2.LucidaFettSub {
	padding-left: 20px;
	padding-right: 20px; }

span.KontextFettSub {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.88em;
	font-weight: bold;
	color: rgb(105,120,139);
	-webkit-font-smoothing: antialiased; }

p.LucidaText {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	font-size: 0.9375em;
	color: rgb(54,48,40);
	line-height: 1.4em;
	-webkit-font-smoothing: antialiased;
	margin-top: 0.2em;
	margin-bottom: 0.3em; }

p.LucidaTextItalic {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	font-size: 0.75em;
	font-style: italic;
	line-height: 1.6em;
	color: rgb(0,0,0);
	margin-top: 0.2em;
	margin-bottom: 0.3em; }



/* Links - übernommen von Stefan, aber umbenannt - Maillink hinzugefügt, damit kein neues Tab aufpoppt
wie bei .extern (im Footer), .download und .fliess_extern (überall im Fließtext) */


/* Formatierungen alle kopiert von a.LucidaLink, aber Links nach Funktion noch ausdifferenziert */


/* Öffnen im selben Fenster, interne Verlinkungen innerhalb der Site */
a.intern {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #CC0000; }

a.intern:link {
	color: #B62E57;
	text-decoration: none; }

a.intern:visited {
	color: #B62E57;
	text-decoration: none; }

a.intern:hover {
	color: #A32943;
	text-decoration: underline; }


/* a.extern muss nicht visuell formatiert werden, denn nur die Icons im Footer haben diese Klasse,
diese Links sollen in einem neuen Fenster/Tab öffnen - dank jQuery */



/* Öffnen kein neues Fenster, dafür öffnet sich das Mailprogramm via mailto im Link */
a.mail {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #CC0000; }

a.mail:link {
	color: #B62E57;
	text-decoration: none; }

a.mail:visited {
	color: #B62E57;
	text-decoration: none; }

a.mail:hover {
	color: #A32943;
	text-decoration: underline; }


/* Öffnen in neuem Fenster/Tab den PDF-Reader - dank jQuery */
a.download {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #CC0000; }

a.download:link {
	color: #B62E57;
	text-decoration: none; }

a.download:visited {
	color: #B62E57;
	text-decoration: none; }

a.download:hover {
	color: #A32943;
	text-decoration: underline; }


/* Öffnen in neuem Fenster/Tab - dank jQuery - Links zu externen Websites */
a.fliess_extern {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #CC0000; }

a.fliess_extern:link {
	color: #B62E57;
	text-decoration: none; }

a.fliess_extern:visited {
	color: #B62E57;
	text-decoration: none; }

a.fliess_extern:hover {
	color: #A32943;
	text-decoration: underline; }



/* Videoeinbindung, Bildeinbindung in Tabellen mit Spalten 60-40 */
div.zweispaltig iframe.video_1 {
	padding: 4px 8px 4px 20px;
	max-height: 281px; }
/* Air Borne, Superconstellation, Leben ohne Geld, alle Vimeo in Aspect Ratio 500x281px */

div.zweispaltig iframe.video_2 {
	padding: 4px 8px 4px 20px;
	max-height: 307px; }
/* CAD, YouTube */

div.zweispaltig iframe.video_3 {
	padding: 4px 8px 4px 20px;
	max-height: 375px; }
/* Team Fiction, Vimeo in Aspect Ratio 4x3 */


div.zweispaltig table img {
	padding: 4px 8px 4px 20px;
	max-height: auto; }

.zweispaltig table.zwei_sp60_40 tr td.v_mittig {
	padding: 4px 20px 4px 8px;
	vertical-align: middle;
	max-width:280px; }
/* max-width ist wichtig, da sonst bei verschieden langen Texten der linke Abstand zum Video variiert */



/* Footer */

div.footer {
	width: 100%;
	height: auto;
	padding: 30px 0px 10px 0px;
	margin-bottom: 30px; }

div.footer_links {
	float: left;
	width: 70%;
	height: 20px;
	text-align: left; }

div.footer_rechts {
	float: right;
	width: 30%;
	height: 20px;
	text-align: right; }

div.footer_rechts ul {
	list-style-type: none; }

div.footer_rechts ul li {
	display: inline;
	padding-left: 0.7em;
	line-height: 1.2em; }

.ArialKlein {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #363028;
	-webkit-font-smoothing: antialiased; }







/* --------------------- Media Query 1 - kleiner/gleich 980px Breite --------------------- */


/* Entspricht 980px bei 16px = 1em -- padding der Textblöcke außen 30px */
@media screen and (max-width: 61.25em) {

	div.haupt {
		max-width: 100%; }

	/* Hauptnavigation in Header mit Hauptüberschrift, auf Mobil-
	geräten fest am oberen Bildschirmrand (position: fixed). */		
	div.header {
		position: fixed;
		top: 0px;
		left: 0px; 
		width: 100%;
		max-width: 100%;
		margin-top: 0px;
		height: 60px;
		padding: 20px 30px 20px 30px;
		border-bottom: 1px solid rgb(160,160,160); }

	h1 {
		font-size: 1.5em;
		line-height: 1.0em; }

	ul#hauptnavi li {
		display: inline;
		margin-right: 0.5em;
		line-height: 1.5em; }

	div.abbildung_big {
		margin-top: 60px; }

	div.abbildung_big.abstand_null {
		margin-top: 0px; }

	div.abbildung_big img {
		width: 100%;
		height: auto;
		margin-bottom: -5px; }

	div.karussell_start {
		margin-top: 0px; }
		
	div.karussell_start div img {
		width: 100%;
		height: auto;
		margin-bottom: -4px; }

	div.karussell_big {
		margin-top: 60px; }
		
	div.karussell_big div img {
		width: 100%;
		height: auto;
		margin-bottom: -4px; }


	/* Subnavigation für Portfolio auf Startseite wird auf kleineren
	Bildschirmen umformatiert */
	div.subnavi {
		width: 100%;
		padding: 30px 30px 20px 30px;
		margin-top: 54px; }

	ul.subnavi_haupt {
		display: inline; }

	.subnavi_haupt li {
		display: inline;
		padding-right: 0; }

	ul.subnavi_unter {
		padding-bottom: 1.0em; }

	ul.subnavi_unter li {
		display: inline; }

	p.LucidaMenue_Rot {
		margin-top: 0.2em;
		margin-bottom: 0.5em; }

	.sichtbar_mobil {
		display: inline; }


	/* Container für Fließtextinhalte -- allgemeines padding 30px, auf Mobil
	unten 0px: hier kommt immer dann ein hr-trenner zum Einsatz, wenn darunter
	wieder ein Textcontainer folgt */
	div.einspaltig {
		margin-top: 0px;
		padding: 30px 30px 0px 30px;
		height: auto; }

	div.zweispaltig {
		margin-top: 0px;
		padding: 28px 18px 0px; 18px; /* war oben 18 */
		height: auto; }


	/* Nur für die Publikationsseite, wo links Coverabbildlungen stehen,
	ansonsten haben zweispaltige Tabellen links und rechts nur Text. */
	.zweispaltig table.zwei_sp50_50 tr td img.cover {
		width: 100%;
		height: auto; }


	/* Nur in Seite Aktuell bzw. News */
	div.einspaltig h2.LucidaFettSub {
		font-size: 0.9375em;
		line-height: 1.4em;
		margin-top: 0px;
		padding-left: 0px;
		padding-right: 0px; 
		margin-bottom: 12px; }

	div.einspaltig p.LucidaText {
		font-size: 0.88em;
		line-height: 1.5em;
		padding-left: 0px;
		padding-right: 0px; }

	div.zweispaltig h2.LucidaFettSub {
		font-size: 0.9375em;
		line-height: 1.4em;
		margin-top: 10px;
		margin-bottom: 12px;
		padding-left: 12px;
		padding-right: 12px; }

	div.zweispaltig p.LucidaText {
		font-size: 0.88em;
		line-height: 1.5em;
		padding-left: 12px;
		padding-right: 12px;  }

	div.zweispaltig p.LucidaTextItalic {
		font-size: 0.8em;
		line-height: 1.6em;
		color: rgb(0,0,0);
		padding-left: 12px;
		padding-right: 12px; }

	span.KontextFettSub {
		line-height: 0.8em; }



	.einspaltig h2.LucidaFettHead {
		font-size: 1.2em;
		line-height: 1.4em;
		margin-top: 4px;
		margin-bottom: 1.0em; }



	div.zweispaltig table p {
		padding: 2px 12px 12px 12px; }
		/* Abstände ergeben zusammen mit padding des div von 18px
		zusammen wieder links und rechts 30px, der Steg zwischen
		den Textspalten ist dafür etwas schmaler, nämlich 24px */

	div.zweispaltig table p.ohne_ue {
		padding: 0px 12px 18px 12px; }


	.zweispaltig p.Lucida_Preise {
		padding-top: 12px;
		padding-left: 12px;
		margin-bottom: -20px; }
	/* Unter einem Absatz LucidaPreise ist in der Regel eine h2.LucidaFettHead,
	die einen Abstand nach oben macht – dieser wird durch -20px ausgeglichen */

	div.zweispaltig h2.LucidaFettHead {
		font-size: 1.2em;
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 0px;
		margin-top: 7px;
		margin-bottom: 0.8em; }

	div.zweispaltig h2.LucidaFettHead.Mit_Preis {
		font-size: 1.2em;
		margin-bottom: 0.8em;
		padding-left: 12px;
		padding-right: 12px;
		margin-top: 12px; }

	h3.LucidaFettGross, h3.LucidaFettGrossEN {
		font-size: 1.0em;
		line-height: 1.4em; }
	/* h3 außerhalb Tabellen, z.B. in einspaltigen div */

	.LucidaTextGross, .LucidaTextGrossEN {
		font-size: 0.88em;
		line-height: 1.48em; }

	table.zwei_sp50_50 h3.LucidaFettGrossEN {
		font-size: 0.88em;
		line-height: 1.3em;
		padding-top: 6px; /* war 0 */
		padding-bottom: 0px;
		padding-left: 12px; }

	table.zwei_sp50_50 h3.LucidaFettGross {
		font-size: 0.88em; 
		line-height: 1.3em;
		padding-top: 6px; /* war 0 */
		padding-bottom: 0px;
		padding-left: 12px; }
	/* h3 innerhalb Tabellen, z.B. in der Sektion Kontext, Autor usw. in den
	Portfolio-Unterseiten */

	/* test - siehe reisen - version padd 30 */
	hr.trenner {
	    height: 5px; 
    	background: rgb(235,235,235);
    	display: block;
    	margin-top: 28px;
    	margin-left: 12px;
    	margin-right: 12px;
    	margin-bottom: 0px; }

	div.einspaltig hr.trenner {
    	height: 5px;
    	margin-top: 28px;
    	margin-left: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px; }

	hr.trenner.verborgen {
		visibility: hidden; }
/*
	Der Trenner muss auf Mobil wegen der Abstände nach unten überall am Ende
	eines div-Blocks vorhanden sein, aber im untersten div-Block muss er
	ausgeblendet werden, um nicht im Konflikt mit der Footer-Begrenzungslinie
	zu kommen.
	Zur Rekapitulation:
	display none zeigt ein Element nicht an und macht zusätzlich den Platz
	frei für andere Elemente.
	visibility hidden zeigt ein Element ebenfalls nicht an, besetzt aber den
	Platz, an dem das Element im Normalfall angezeigt würde.
*/



	ul.cv li {
		font-size: 0.88em;
		line-height: 1.42em;
		padding-bottom: 0.45em; }

	p.LucidaTextGrossEN.weit, .LucidaTextGross.weit {
		padding: 12px 12px 0px 12px; }
	/* Betrifft nur Absätze, über denen keine Überschrift steht
	Beispiel: ABOUT ganz oben */


	/* Videoeinbindung, Bildeinbindung in Tabellen */
	div.zweispaltig iframe.video_1, div.zweispaltig iframe.video_2, div.zweispaltig iframe.video_3 {
		margin: 0;
		padding-left: 12px; }

	div.zweispaltig table img {
		margin: 0;
		padding-left: 12px; }

	.v_mittig {
		vertical-align: middle; }



	/* Footer */
	div.footer {
		width: 100%;
		padding: 30px 0px 24px 30px;
		margin-bottom: 30px;
		border-top: 1px solid rgb(160,160,160); }

	div.footer_links {
		float: left;
		width: 70%;
		padding: 0px 20px 30px 0px;
		text-align: left; }

	div.footer_rechts {
		float: right;
		width: 30%;
		padding: 0px 30px 30px 0px;
		text-align: right; }

}





/* --------------------- Media Query 2 - kleiner/gleich 640px Breite --------------------- */

/* Entspricht 640px bei 16px = 1em -- padding der Textblöcke außen 24px */
@media screen and (max-width: 40em) {

	/* Hauptnavigation in Header mit Hauptüberschrift, auf Mobil-
	geräten fest am oberen Bildschirmrand. */		
	div.header {
		padding: 20px 24px 20px 24px; }
		
	.unsichtbar_mobil {
		display: none; }

	.sichtbar_mobil2 {
	display: inline; }

	.sichtbar_desktop {
		display: none; }

	p.LucidaMenue_Rot {
		display: inline;
		margin-top: 0;
		margin-bottom: 0; }

	div.header {
		height: 60px; }

	h1 {
		font-size: 20px;
		line-height: 1.0em; }

	ul#hauptnavi li {
		display: inline;
		margin-right: 0.4em;
		line-height: 1.3em; }

	div.subnavi {
		width: 100%;
		padding: 28px 24px 14px 24px;
		margin-top: 56px; }


	/* Container für Fließtextinhalte -- allgemeines padding 24px, auf Mobil
	unten 0px: hier kommt immer dann ein hr-trenner zum Einsatz, wenn darunter
	wieder ein Textcontainer folgt */
	div.einspaltig {
		margin-top: 0px;
		padding: 24px 24px 0px 24px;
		height: auto; }

	div.zweispaltig {
		margin-top: 0px;
		padding: 14px 14px 0px; 14px;
		height: auto; }


	/* Nur für die Publikationsseite, wo links Coverabbildlungen stehen,
	ansonsten haben zweispaltige Tabellen links und rechts nur Text. */
	.zweispaltig table.zwei_sp50_50 tr td img.cover {
		width: 100%;
		max-width: 450px; /* Originale Breite der Cover, damit nicht hochskaliert wird */
		padding: 10px;
		height: auto; }


	/* Nur in Seite Aktuell bzw. News */
	div.einspaltig h2.LucidaFettSub {
		font-size: 0.9375em;
		padding-left: 0px;
		padding-right: 0px; 
		margin-bottom: 12px; }

	div.einspaltig p.LucidaText {
		font-size: 0.88em;
		line-height: 1.5em;
		padding-left: 0px;
		padding-right: 0px; }

	div.zweispaltig h2.LucidaFettSub {
		font-size: 0.9375em;
		margin-top: 10px;
		margin-bottom: 12px;
		padding-left: 10px;
		padding-right: 10px; }

	div.zweispaltig p.LucidaText {
		font-size: 0.88em;
		line-height: 1.5em;
		padding-left: 10px;
		padding-right: 10px;  }

	div.zweispaltig p.LucidaTextItalic {
		font-size: 0.8em;
		line-height: 1.6em;
		color: rgb(0,0,0);
		padding-left: 10px;
		padding-right: 10px; }


	div.einspaltig ul.cv {
		margin-bottom: 1.4em; }

	.einspaltig h2.LucidaFettHead {
		font-size: 1.2em;
		margin-top: 4px;
		margin-bottom: 0.9em; }


	.zweispaltig p.Lucida_Preise {
		padding-top: 10px;
		padding-left: 10px;
		margin-bottom: -20px; }
	/* Unter einem Absatz LucidaPreise ist in der Regel eine h2.LucidaFettHead,
	die einen Abstand nach oben macht – dieser wird durch -20px ausgeglichen */

	div.zweispaltig h2.LucidaFettHead {
		font-size: 1.2em;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 0px;
		margin-top: 6px;
		margin-bottom: 0.7em; }

	div.zweispaltig h2.LucidaFettHead.Mit_Preis {
		font-size: 1.2em;
		margin-bottom: 0.7em;
		padding-left: 10px;
		padding-right: 10px;
		margin-top: 12px; }

	div.zweispaltig p.LucidaTextGrossEN.weit, div.zweispaltig p.LucidaTextGross.weit {
		padding: 10px; }
	/* Betrifft nur Absätze, über denen keine Überschrift steht
	Beispiel: ABOUT ganz oben */


	div.zweispaltig table p.ohne_ue {
		padding: 0px 10px 10px 10px; }


	div.einspaltig hr.trenner {
    	height: 4px;
    	margin-top: 24px;
    	margin-left: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px; }

	div.zweispaltig hr.trenner {
    	height: 4px;
    	margin-top: 24px; /* war 24 für text drüber gut, für video/bild-kombi schlecht */
    	margin-left: 10px;
    	margin-right: 10px;
    	margin-bottom: 0px; }

	table.v_b_kombi + hr.trenner {
		margin-top: 0px; }
		/* Nachbar-Kombinator: wenn eine hr.trenner auf eine video_bild_kombi-Tabelle folgt,
		dann wird ab hier die Bildunterschrift unter dem Bild bzw. Video dargestellt;
		da soll dann der Abstand der hr nach oben 0 sein, sonst wird er viel zu groß. */


	table, tr, td {
		display: inline; }

	div.zweispaltig table tr td {
		height: auto; }

	div.zweispaltig table p {
		padding: 2px 10px 8px 10px; }

	table.zwei_sp50_50 h3.LucidaFettGrossEN {
		font-size: 0.88em;
		line-height: 1.3em;
		padding-top: 10px;
		padding-bottom: 0px;
		padding-left: 10px; }

	table.zwei_sp50_50 h3.LucidaFettGross {
		font-size: 0.88em; 
		line-height: 1.3em;
		padding-top: 10px;
		padding-bottom: 0px;
		padding-left: 10px; }
	/* h3 innerhalb Tabellen, z.B. in der Sektion Kontext, Autor usw. in den
	Portfolio-Unterseiten */


	/* Videoeinbindung, Bildeinbindung in Tabellen */
	div.zweispaltig iframe.video_1, div.zweispaltig iframe.video_2, div.zweispaltig iframe.video_3 {
		display: inline;
		margin: 12px 0px 4px 0px;
		padding-left: 10px; }

	div.zweispaltig table img {
		display: inline;
		margin: 0;
		padding-left: 20px; }

	.v_mittig {
		vertical-align: top; }

	p.LucidaTextGrossEN.weit, .LucidaTextGross.weit {
		padding: 10px 24px 0px 24px; }
	/* Betrifft nur Absätze, über denen keine Überschrift steht
	Beispiel: ABOUT ganz oben */

	div.abbildung_big {
		margin-top: 60px; }

	div.karussell_big {
		margin-top: 60px; }


	/* Footer */

	div.footer {
		width: 100%;
		padding: 30px 0px 20px 0px;
		margin-bottom: 30px; }

	div.footer_links {
		float: left;
		width: 70%;
		padding: 0px 20px 30px 24px;
		text-align: left; }

	div.footer_rechts {
		float: right;
		width: 30%;
		padding: 0px 24px 30px 20px;
		text-align: right; }

}




/* --------------------- Media Query 3 - kleiner/gleich 550px Breite --------------------- */

/*
	Ab hier werden im Fixed-Header die Überschrift und die Navi zweizeilig
	untereinander dargestellt; über dem Wert von 550px Breite einzeilig mit
	Überschrift links und Navi rechts ausgerichtet.
	Breakpoint 34.375em entspricht 550px bei 16px = 1em.
	Allgemeines padding zum Rand des Bildschirms ist 20px. Ein- UND zwei-
	spaltige Text-Container werden generell einspaltig bzw. deren Inhalte
	inline dargestellt. Auf einem Smartphone ist Zweispaltigkeit Unsinn,
	selbst in der Quer-Ansicht.
*/
@media screen and (max-width: 34.375em) {

	div.header {
		height: 80px;
		padding: 20px 20px 20px 20px; }

	div.header_links {
		float: left;
		width: 100%;
		height: 16px;
		text-align: left;
		margin-bottom: 7px; }

	div.header_rechts {
		float: left;
		width: 100%;
		height: 16px;
		text-align: left; }

	div.subnavi {
		width: 100%;
		padding: 26px 20px 12px 20px;
		margin-top: 74px; }


	div.abbildung_big {
		margin-top: 80px; }

	div.karussell_big {
		margin-top: 80px; }
	/* Auf Smartphone braucht man nach oben 80px Abstand, da sonst ein Teil
	des Bildes unter der Navigation verschwindet */


	/* Container für Fließtextinhalte -- allgemeines padding 20px, auf Mobil
	unten 0px: hier kommt immer dann ein hr-trenner zum Einsatz, wenn darunter
	wieder ein Textcontainer folgt */
	div.einspaltig {
		margin-top: 0px;
		padding: 20px 20px 0px 20px;
		height: auto; }

	div.zweispaltig {
		margin-top: 0px;
		padding: 20px 20px 0px 20px;
		height: auto; }

	/* Nur für die Publikationsseite, wo links Coverabbildlungen stehen,
	ansonsten haben zweispaltige Tabellen links und rechts nur Text. */
	.zweispaltig table.zwei_sp50_50 tr td img.cover {
		padding: 0px;
		width: 100%;
		height: auto; }


	/* Nur in Seite Aktuell bzw. News */
	div.einspaltig h2.LucidaFettSub {
		font-size: 0.9375em;
		padding-left: 0px;
		padding-right: 0px; 
		margin-bottom: 12px; }

	div.einspaltig p.LucidaText {
		font-size: 0.88em;
		line-height: 1.5em;
		padding-left: 0px;
		padding-right: 0px; }

	div.zweispaltig h2.LucidaFettSub {
		font-size: 0.9375em;
		margin-top: 7px;
		margin-bottom: 12px;
		padding-left: 0px;
		padding-right: 0px; }

	div.zweispaltig p.LucidaText {
		font-size: 0.88em;
		line-height: 1.5em;
		padding-left: 0px;
		padding-right: 0px;  }

	div.zweispaltig p.LucidaTextItalic {
		font-size: 0.8em;
		line-height: 1.5em;
		color: rgb(0,0,0);
		padding-left: 0px;
		padding-right: 0px; }


	div.einspaltig ul.cv {
		margin-bottom: 1.4em; }

	.einspaltig h2.LucidaFettHead {
		font-size: 1.2em;
		margin-bottom: 0.7em;
		margin-top: 6px; }


	.zweispaltig p.Lucida_Preise {
		padding-top: 0px;
		padding-left: 0px;
		margin-bottom: -20px; }
	/* Unter einem Absatz LucidaPreise ist in der Regel eine h2.LucidaFettHead,
	die einen Abstand nach oben macht – dieser wird durch -20px ausgeglichen */

	div.zweispaltig h2.LucidaFettHead {
		font-size: 1.2em;
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0px;
		margin-top: 2px;
		margin-bottom: 0.5em; }

	div.zweispaltig h2.LucidaFettHead.Mit_Preis {
		font-size: 1.2em;
		margin-bottom: 0.5em;
		padding-left: 0px;
		padding-right: 0px;
		margin-top: 12px; }

	div.zweispaltig p.LucidaTextGrossEN.weit, div.zweispaltig p.LucidaTextGross.weit {
		padding: 0px 0px 14px 0px; }
	/* Betrifft nur Absätze, über denen keine Überschrift steht
	Beispiel: ABOUT ganz oben */

	div.zweispaltig table p {
		padding: 0px 0px 10px 0px; }


	table.zwei_sp50_50 h3.LucidaFettGrossEN {
		font-size: 0.88em;
		line-height: 1.3em;
		padding-top: 6px;
		padding-bottom: 0px;
		padding-left: 0px; }

	table.zwei_sp50_50 h3.LucidaFettGross {
		font-size: 0.88em; 
		line-height: 1.3em;
		padding-top: 6px;
		padding-bottom: 0px;
		padding-left: 0px; }
	/* h3 innerhalb Tabellen, z.B. in der Sektion Kontext, Autor usw. in den
	Portfolio-Unterseiten */

	div.zweispaltig table p.ohne_ue {
		padding: 0px 0px 10px 0px; }


	/* Videoeinbindung, Bildeinbindung in Tabellen */
	div.zweispaltig iframe.video_1 {
		padding: 0px 0px 0px 0px;
		margin-top: 0px;
		max-width: 90%;
		max-height: 170px; }
	/* max-width und max-height sind wichtig, da sonst das Vimeo-eigene
	Stylesheet für Videos in iframes hier ziemliche Verheerungen anrichtet. */

	div.zweispaltig iframe.video_2 {
		padding: 0px 0px 0px 0px;
		margin-top: 0px;
		max-width: 287px;
		height: auto; }
	/* YouTube-Video funktioniert beim Skalieren wieder ganz anders ... */

	div.zweispaltig iframe.video_3 {
		padding: 0px 0px 0px 0px;
		margin-top: 0px;
		max-width: 90%;
		max-height: 230px; }
	/* Team Fiction, Vimeo in Aspect Ratio 4x3 */


	div.zweispaltig table img {
		padding: 0px 0px 0px 0px;
		margin-top: 0px;
		max-width: 320px;
		height: auto; }

	td.v_mittig {
		display: inline;
		padding: 0;
		margin: 0; }

	td.v_mittig p {
		padding: 0;
		margin: 8px 0px 0px 0px; }


	hr.trenner {
    	height: 3px;
    	margin-top: 20px;
    	margin-left: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px; }

	div.zweispaltig hr.trenner {
    	height: 3px;
    	margin-top: 20px;
    	margin-left: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px; }

	table.v_b_kombi + hr.trenner {
		margin-top: 0px; }
	/* Nachbar-Kombinator: wenn eine hr.trenner auf eine video_bild_kombi-Tabelle folgt,
	dann wird auf Smartphones die Bildunterschrift unter dem Bild bzw. Video dargestellt;
	da soll dann der Abstand der hr nach oben 0 sein, sonst wird er viel zu groß. */


	/* Footer */

	div.footer {
		width: 100%;
		padding: 20px 0px 30px 0px;
		margin-bottom: 30px; }

	div.footer_links {
		float: left;
		width: 70%;
		padding: 0px 20px 40px 20px;
		text-align: left; }

	div.footer_rechts {
		float: right;
		width: 30%;
		padding: 0px 20px 40px 20px;
		text-align: right; }

}


/* --------------------- Ende Media Queries --------------------- */















/* Ab hier die vorhandenen Formatierungen von Stefan, die nirgendwo in den responsive
gemachten Seiten vorkommen -- drinlassen für die _alt-Dateien */


.LucidaTextHell {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #CCCCCC;
	font-size: 12px;
	line-height: 21px; }

.LucidaTextWeiss {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 20px;
	font-weight: normal; }

.KontextFett {
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height: 21px;
	color: #69788B;
	-webkit-font-smoothing: antialiased; }

.ttimagesnap_style {
  text-align: center;
  font: 10px Arial,Helvetica,sans-serif;
  border: solid 1px #666666;
  background-color: #ffffff;
  padding: 1px;
  position: absolute;
  z-index: 100; }

.LucidaMenueBackg {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	font-size: 13px;
	color: #333333;
	font-weight: normal;
	letter-spacing: normal;
	word-spacing: normal;
	-webkit-font-smoothing: antialiased;
	background-color: #FFFFFF; }



.LucidaLink_hell {
	font-size: 11px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #CC0000;
	line-height: 18px; }

.LucidaLink_hell:link {
	font-size: 12px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #333333;
	line-height: 21px;
	text-decoration: none; }

.LucidaLink_hell:visited {
	font-size: 12px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #333333;
	line-height: 21px;
	text-decoration: none; }

.LucidaLink_hell:hover {
	font-size: 12px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #E2E2E2;
	line-height: 21px;
	background-color: #5F6D7F; }



.LucidaLink_white {
	font-size: 11px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #CC0000;
	line-height: 18px; }

.LucidaLink_white:link {
	font-size: 12px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #CCCCCC;
	line-height: 21px;
	text-decoration: none; }

.LucidaLink_white:visited {
	font-size: 12px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #CCCCCC;
	line-height: 21px;
	text-decoration: none; }

.LucidaLink_white:hover {
	font-size: 12px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	color: #CCCCCC;
	line-height: 21px; }