/*
stefan beck css 13.07.2008 19:10 
-- 16.06.2023 19:51

-- media iPhone 602px --- ab 635
*/


/* -- https://moritzgiessmann.de/blog/posts/simplest-no-js-view-transition-multi-page-demo/ -- */

@view-transition {
    navigation: auto;
}


html { 
	font-size:18px;
	height: 100%; 
}

body { 
	
	line-height:150%;
	font-family: "Times New Roman", Times, Georgia, serif;
	
	background-color: #908c90; 
	/* text-align: center; */ 
}

.fontextra {
	font-family:SnellRoundhand;
	font-size:200%;
	line-height:140%;
}

h1 {
	font-size:1.4em;
	margin:20px 0px 20px 0px;
}

h2 {
	font-size:1.4em;
	line-height:inherit;
	margin:0;
	padding:12px 0;
}

h3 {
	font-size:1.3em;
	display:inline;
	line-height:inherit;
}

h4 {
	font-size:1.1em;
	display:inline;
}

blockquote,
q {
	quotes: none;
	margin-bottom: 12px;
	margin-bottom: 0.857142857rem;
	padding: 12px 24px;
	padding: 0.10rem 1rem 0.10rem 2.5rem;
	font-style: italic;
	background: url('data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAZCAMAAAAR624oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFd6p38/Xyf69/udK52ubZydzJkLmQiLSH4uvhmL6Yqciosc2xoMOg0uHR6vDqwdfA+/r6HUR54wAAABF0Uk5T/////////////////////wAlrZliAAAAz0lEQVR42oSSWxbDIAhEQXybpO5/tVWJgmlPy1cmFxBGof4MkE/KGuDhNLYewAp1BgwKJgAwTkqbDHFiTE2ma9IYmiw4m6PXpTUaLp2407jo1ahHmby0VkJ7ckBZzDZKaj+dDJxdt9ZZ2dKLy15sFc6brn0nbarfNHYDNAYOT2Nae8vkdnzvapfMDzy2EzwG4rM5wn22Kod6yI/eziyVBnY7zg+MK/+o2+EvNvWcmp0uc5J5327UrwtnzhfOhp1EDsU5R3R+vNQ/D/lbvAUYAEAPHWTx7TUOAAAAAElFTkSuQmCC') no-repeat;
}

hr {
    clear:both;
}

img {
	border:0;
	background:#eee;
}

p {
	font-size:inherit;
	margin-top:0px;
}

q {
	font-style:italic;
}

ul {}

li {
	padding:0 0 0.8em 0;
}

table {}
tr {}
td {}

details {
	padding 12px 0;	
}

details:focus, summary:focus {
	outline-style: none;
}

summary {
	margin:15px 0;
}

summary:hover {
	cursor:pointer;	
}

/* ausrichtungen */

.left {text-align:left;}

.right {text-align:right;}

.center {text-align:center;}

.hid {position:absolute;left:-5000px;}

.nul {list-style:none;}

.clearb {clear:both;}

/* farben */

.bggrey1 {background:#DCDCDC;}


/* Der Kasten mit dem Quellcode */


a:link, a:visited { 
	text-decoration:underline;
	font-weight:normal;
	color:#000;
}
  
a:hover { 
	color:#808080;
	text-decoration:none;	
}

a[rel ~="external"] {
	padding-left: 18px;
	background-image: url('../picts/061220_icon_external.gif');
	background-repeat: no-repeat;
	background-position: 0 2px;
}

#flickr-stream a:hover {
	border-bottom:2px solid #0000FF;
	background:#eee;
}

h3 a:link {
	text-decoration:none;	
	color:#000;
	font-weight:bold;
}

h3 a:visited {
	text-decoration:none;
	color:#000;
	font-weight:bold;
}

h3 a:hover {
	color:#808080;
	text-decoration:underline;
	font-weight:bold;
}

h4 a:link {
	text-decoration:none;
	color:#000;
	font-weight:bold;
	border-bottom:1px solid #000;
}

h4 a:visited {
	text-decoration:none;
	color:#808080;	
	font-weight:bold;
	border-bottom:0px solid #000;
}

h4 a:hover {
	color:#808080;
	text-decoration:none;
	font-weight:bold;
	border-bottom:0px solid #000;	
}
/* - header -- */

.firstline {
	position:absolute;
	top:5px;
	width:100%;
	padding:0;
	color:#fff;
	text-shadow: 1px 1px 1px #a0a0a0;
}

#header ul, #footer ul, .firstline ul, .text-topmenu ul {
	list-style:none;
	margin:0;
	padding:0 5px 25px 5px;
}

#header ul li,#footer ul li, .firstline ul li, .text-topmenu ul li {
	/* display:inline; */
	float:left;
	width:33%;
}

#header ul li.dreidrei, #footer ul li.dreidrei {
	/* padding-left:24%; */
}

.headerbild {
	margin-top:-100px;
	/* height:300px; */
	vertical-align:middle;
	overflow:hidden;
	text-align:center;	
}

.headerbild a img {
	vertical-align:middle;
	object-fit: cover;
}

a.headerbildtitle {
	margin:0;
	padding:0;	
}
/*
a.headerbildtitle span {
	display:none;	
}

a.headerbildtitle:hover span {
	display: block;
	position: absolute; 
	top: 65px; 
	left: 40%;
	right:5%; 
	padding:1%;
	z-index: 120;
	color: #000000; 
	background: #FFFFCC;
	font: 1.5em Arial, sans-serif; 
	text-align: left;
	border-radius:3px;
	opacity: 0.7;	
}
*/

/* -- Neues Hover in Coverbild - 09.12.2015 15:39 --- */

.headerbild span.tip {
	position: absolute; 
	top: 65px; 
	margin:0 10%;
	/* left: 40%; right:10%; */
	padding:1%;
	z-index: 120;
	color: #000000; 
	background: #FFFFCC;
	font: 1.5em Arial, sans-serif; 
	text-align: left;
	border-radius:3px;
	visibility:hidden;
	opacity:0;
	word-break: break-all;
}

.headerbild:hover span.tip {
	
	visibility:visible;
	opacity:0.7;	
}


/* ----- */


.platonic-logo {
	text-align:center;
	margin:15px 0;
	position: absolute;
	left: 0;
	top: 400px;
	z-index: 110;
	opacity: 0.9;
}

.platonic-logo img {
	background:none;
}

#synopsis, .vcard {
	margin:0;
	padding: 8px 0 0 0;
}

.block {
	margin:25px 0;	
	}

.block h3 {
	font-weight:bold;
	font-size:1.0em;
}

#delicious-tags-realbeck {
	font-family: "Times New Roman", Times, Georgia, serif; 
}
	
#social {}
#social ul li {
	margin:10px 8px 10px 0;
}

#social ul li img {
	padding:0 8px 0px 0;
	background: none;
}

/* --- BILDer --------------- */

#identity {
	margin:0 0 0 0;	
	text-align:center;
}

#identity p {
	float:left;
	width:200px;	
	margin: 0 0 0 0px;
}

#identity img, #identity em {
	/* float:right; */
	/* margin: 0 180px 25px 0px; */
}

.alert {
	background:#FFA2A2;
	padding:10px 5px 10px 30px;
	/* background-image: url(../picts/icons/alert-icon-20x20.png); */
	background-repeat:no-repeat;
	background-position: 5px;
}

.alert img {
	background:none;
	vertical-align:middle;
}

/* --- Flickr Ipernity Fotos ------------- */

#flickr-stream {
	text-align:center;
	margin:0 0 20px 0;
}

#flickr-stream ul {
	list-style:none;
	border:1px solid #eee; 
	padding:15px 0;	
}

#flickr-stream ul li.bild {
	display:inline;
}

#flickr-stream a {
	margin:0 10px 0 0;
}

.bip {
	display:inline;	
}

/* --- NEWS --------------- */

#news {
	width:95%;
	margin-bottom:3rem;
}

.news_item {
	margin:0 0 25px 0;
}

.news_item p {
	padding:0 0 0 25px;
}

.news_header {
	background:inherit;
	margin:5px 0 10px 0;
	padding:5px 2px;
	border-bottom:4px solid #DCDCDC;
}


/* --- Der Inhalt --------------- */

.mainblock, .page, #page {
	/* width:605px; */
	margin:0px auto;
	text-align:left;
	border:solid 1px #908C90;
	position:relative;
	/* -- */
	max-width:50rem;
}

#content, #header, #footer {
	border-top:0px solid #000000;
	padding:18px 24px;
	background-color:#fff;
	text-align: left;
}

#header {
	/* border:5px solid red; */
}



.eng {
	padding-right: 5pt;
	padding-left: 3pt 
}

/* Schriften */
tt, courier { 
	font-size: 16px;
	font-size:1rem; 
	line-height: 140%; 
	font-family: "Courier New", Courier, Monaco, sans-serif;
	text-align: left; 
}

.courier-eng { 
	font-size: 16px;
	font-size:1rem; 
	line-height: 140%; 
	font-family: "Courier New", Courier, Monaco, sans-serif;
	padding-right: 5pt;
	padding-left: 3pt;
	text-align: left;
}

.arial-innen {
	font-size: 13px; 
	line-height: 140%; 
	font-family: Arial, Helvetica, Geneva, sans-serif;
	padding: 3pt;
	text-align: left;
 }

.arial-s1, .arial-k1, .arial-s2, .arial-k2  {
	font-size:14px; 
	font-size:0.875rem; 
	line-height: 150%;
	font-family: Arial, Helvetica, Geneva, sans-serif;
	text-align: left; 
	letter-spacing: 0.0em;
}

.verd-s1 {
	font-size: 12px; 
	line-height: 140%;
	font-family: Verdana, Arial, Geneva, sans-serif;
	text-align: left;
 }

.sub-text {
	font-size: 12px;
	line-height: 140%;
}

.textdomain {
	
}

/* listen */

.sampleprojects {}

.sampleprojects ul {
	list-style:none;
	margin:0;
	padding:0;
}

.sampleprojects ul li {
	margin:0px 0px 0px 27px ;
	padding:10px 0px ;
}

.liste-bullet {
	font-size: 13px; 
	line-height: 140%; 
	font-family: "Courier New", Courier, Monaco, sans-serif;
	text-align: left;
	list-style-type: disc; 
	list-style-position: inside ;
}


/* andere */
.mainbildabstand {
	width:160px;
}

#blogfeed h3 {
	padding: 0.5rem 0 1.5rem 0;
	display:block;
}

#blogfeed {
	margin:0 0 2rem 0;
}

/* projecte */

.vevent {
	font-size: 0.8em; 
	line-height: 140%; 
	font-family: Verdana, Arial, Geneva, sans-serif;
}

.project-year, .project-place {
	background-color:#dcdcdc;
	padding-left:5px;
	margin-bottom:12px;
}

.projectlist li {
	text-align: left;
	list-style: none; 
	margin: 0 0 10px 20px;
}

abbr {border:0;}

abbr[title] {
	text-decoration:none;
}

/* texte  */
.stbtop {
	width:600px;
}

.stbtop ul {
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
}

.stbtop ul li {
	display:inline;
}

.topli {
}

.topm {
	margin:0 150px;
}

.topm {
}

.leftnavi {
	list-style:none;
	margin:0;
	padding:0;
}

.leftnavi li {
	margin:0;
	padding:5px 0;
	color:#797979;
}

.leftnavi li a {
	text-decoration:none;
	color:#797979;	
}

.leftnavi li a:hover {
	text-decoration:underline;
	color:#797979;	
}

div.subtextnavi {
	padding:20px 15px;
	border-top:0px dashed #000;
}

ul.subtextnavi{
	width:600px;
}

.subtextnavi li {
	float: left;
	width: 200px;
}

.subtextnavi li a {
	text-decoration:underline;
	color:#797979;	
}

.subtextnavi li a:hover {
	text-decoration:none;
	color:#797979;
}

hr.textdivider {
	margin:3rem 0;
	border:dashed #000 1px;

}

.weitertext li {
	padding:4px 0;
}

.text-table {
	border:0;
	padding:4px;
	margin:0;
	width:600px;
}

.googledocpluto {
	width:400px;
	height:550px;
	margin:0 auto;
}

.newslink {
	padding:5px 0;	
}

/* -------- ......... --------------- */
/* -------- iPhone D --------------- */

@media screen and (max-width: 602px){

/* zoom:115%; */

body {
	font-size:110%;	
}


p, h1, h2, h3, h4, h5  {

	/* transform: scale(1.1); */
}



ul.nul li a strong {
	font-size:115%;
}


.mainblock, .page, #page, body {
	width:auto;
	margin:0;
	padding:0;
	text-align:left;
	max-width:none;
}

#content {
	margin:0;
}

.firstline strong {
	padding:5px;
}

#identity {
	text-align:center;
}


#identity p {
	clear:left;
	margin: 0;
}

#identity img, #identity em {
	float:none;
	margin:0;
}

.headerbild {
	/*
	height:210px;
	*/
	margin-top:0;
	overflow:hidden;
}

.platonic-logo {
	text-align:center; 
	margin:15px 0;
	width:100%;
	position: absolute;
	left: 0;
	top: 40px;
	z-index: 100;
	opacity: 0.7;
}

.platonic-logo img {
	background:none;
}

.googledocpluto {
	width:240px;
	height:300px;
	margin:0 auto;	
}

img, a img, p a img {
	max-width:100%;
	height:auto;
}

/*  --- Schriften --- */

.textdomain {
	
	font-size:120%;
	line-height:140%;	
}

/* in Text Kategorie Subnavi */

div.subtextnavi{
	font-size:16px;
}

ul.subtextnavi {
	width:auto;	
}

.subtextnavi li {
	float: none;
	width: auto;
}



/* --- Flickr Fotos ------------- */



#flickr-stream ul li.bild {
	display:inline;
	padding:0px;
}

.bip {
	padding:20px;
	display:inline-flex;
}

.bip a img {
	width:150px;
	
}

/* ende max-device 602 */
}

/* --- iPad etc --- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

body {
	font-size:120%;	
}

img, a img, p a img {
	max-width:100%;
	height:auto;
}

.mainblock, .page, #page {
	width:auto;
	/* margin:0; */
	padding:0;
}


.headerbild, .headerbild a img {
	width:100% ;
}

#header ul li.dreidrei, #footer ul li.dreidrei {
	/*padding-left:15%; */
}

.arial-s1, .arial-k1 {
	font-size:20px;
}

.text-table {
	border:0;
	padding:4px;
	margin:0;
	width:auto;
}

.text-table p {
	font-size:150%;
}	

/* ende max-device ipad */
}
/* Denke daran :active und :hover  nach :link und :visited zu definieren. */