* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
/*font: 16px arial, verdana, sans-serif;*/
}

body{
	background-color:black;
	color:white;
	text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
	font: 16px arial, verdana, sans-serif;
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 100%;
}

div#wrapper {
position: relative;
box-sizing: border-box;
margin: 0 auto;
max-width: 1000px;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
padding-bottom: 40px; /* Platz für den absolut positionierten Footer */
}

a:link {color:#cc6600; text-decoration:none; }
a:visited { color:#663333; text-decoration:none; }
a:focus { font-weight:bold; color:#ff9900; text-decoration:underline; }
a:hover { font-weight:bold; color:#ff9900; text-decoration:none; }

#header {
	color:#888888;
	max-width:1000px;
	width:100%;
	height:auto;
	/*vertical-align:middle;*/
	margin-left:auto;
	margin-right:auto;
}

#header img {
	max-width:100%;
	height:auto;
	display:block;
}

#header a {
	font-weight:normal;
}

#header a img {
	border:0px;
	border-width:0px;
	border : 0 none;
}

#rightbar{
	box-sizing:border-box;
	width:200px;
	float:right;
	font-size:12px;
	color:#808080;
}

#rightbar ul{
	font-size:10px;
	padding-left:20px;
}


.sidebox{
	padding-bottom:10px;
	margin-bottom:50px;
	border:1px dotted #cc6600;
	box-shadow: 2px 2px 5px 0px #cc6600;
    -moz-box-shadow: 2px 2px 5px 0px #cc6600;
    -webkit-box-shadow: 2px 2px 5px 0px #cc6600;
    /* Versatz links - Versatz oben - Unschärfe - Schattenradius - Farbe */
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.sidebox_header {
	padding:5px;
	font-weight:bold;
	color: #000000;
	background-color: #cc6600;
}

.sidebox_content {
	padding:10px;
}


.sidebar_table{
	border:no-border;
	border:0;
	color:#808080;
	font-size:14px;
	width:170px;
	cellpadding:0;
	cellspacing:0;
	border-collapse:collapse;
	table-layout:fixed;	
}

.tour{
border-bottom: 1px dotted grey;	
}

.left_cl{
	width:110px;
}

.right_cl{
	width: 60px;
	text-align:right;
}

.sum_row_left{
	border-top:1px solid grey;
	font-size:12px;
}

.sum_row_right{
	border-top:1px solid grey;
	font-size:12px;
	text-align:right;
}



#main_content{
	box-sizing:border-box;
	margin-top:-4px;
	padding: 0 100px;
	/* 1000px Wrapper - 200px Sidebar - 2x100px Polsterung = 600px Textbreite, wie gehabt */
	margin-right: 200px;
	width: auto !important;
	background-color:black;
	background-image:url(../images/right.png);
	background-position:right top;
	background-repeat:repeat-y;
}

#main_content img,
#main_content iframe {
	max-width:100%;
}


.news {
	padding:15px;
	border: 0px;	
	border-bottom: 1px;	
	border-style: dashed;
	border-color:#ff9900;
	padding-bottom: 30px;
	padding-right: 50px;
	margin-bottom:60px;
}

.news_title{
	font-family: "Times New Roman";
	font-size:	20px;
	color: #ff5500;
}

.news_date {
	float:right;
	font-size: 10px;
	color: #808080;
	margin-top:7px;	
	margin-left: auto;
}

.news_message {
	font-style:italic;
	margin-top:10px;
}



#south{
	clear: both;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20px;
	background: #000;
	border-top: 1px dotted #b8b8b8;
	font-size: 10px;
	text-align:center;
}


.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* --- Textseiten (Impressum, Datenschutz) --------------------------------- */

#text_page {
	max-width: 720px;
	padding: 30px 16px 60px 16px;
	font-size: 14px;
	line-height: 1.6;
}

#text_page h1 {
	font-family: "Times New Roman", serif;
	font-size: 26px;
	font-weight: normal;
	color: #ff5500;
	margin-bottom: 24px;
}

#text_page h2 {
	font-size: 15px;
	color: #cc6600;
	margin-top: 28px;
	margin-bottom: 8px;
}

#text_page p {
	margin-bottom: 12px;
	overflow-wrap: break-word;
}

#text_page .back_link {
	margin-top: 40px;
	font-size: 12px;
	color: #808080;
}


/* --- Galerieseite ------------------------------------------------------- */

#gallery_page {
	padding: 20px 16px 60px 16px;
}

#gallery_page h1 {
	font-family: "Times New Roman", serif;
	font-size: 26px;
	font-weight: normal;
	color: #ff5500;
	margin-bottom: 6px;
}

#gallery_intro {
	font-size: 12px;
	color: #808080;
	margin-bottom: 30px;
}

/* --- Albumkacheln --------------------------------------------------------- */

.album_section {
	font-family: "Times New Roman", serif;
	font-size: 21px;
	font-weight: normal;
	color: #ff5500;
	margin-top: 50px;
	padding-top: 22px;
	border-top: 1px dotted #cc6600;
}

/* Der erste Abschnitt braucht oben keine Trennlinie */
.album_section:first-of-type {
	margin-top: 20px;
	padding-top: 0;
	border-top: 0;
}

.album_section_sub {
	font-size: 13px;
	color: #808080;
	margin-top: 4px;
}

.album_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 20px;
}

.album_tile {
	display: block;
	position: relative;
	min-height: 170px;
	padding: 14px;
	border: 1px solid #333;
	border-radius: 4px;
	overflow: hidden;

	/* Das Titelbild kommt als Hintergrund, nicht als <img>. Fehlt die Datei,
	   bleibt einfach die dunkle Fläche stehen - kein kaputtes Bildsymbol. */
	background-color: #111;
	background-size: cover;
	background-position: center;

	/* Kacheln außerhalb des Sichtbereichs erst rendern, wenn man hinscrollt.
	   Spart Layout- und Zeichenarbeit bei 42 Kacheln. Ob der Browser dadurch
	   auch das Hintergrundbild später lädt, garantiert die Spezifikation
	   nicht - die Seite ist darauf also nicht angewiesen.
	   contain-intrinsic-size gibt die erwartete Größe vor, damit die
	   Bildlaufleiste beim Scrollen nicht springt. */
	content-visibility: auto;
	contain-intrinsic-size: 280px 170px;

	text-decoration: none;
	transition: border-color 0.15s ease;
}

.album_tile:hover,
.album_tile:focus {
	border-color: #cc6600;
	font-weight: normal;
}

/* Abdunkeln nur dort, wo die Schrift steht. Die obere Bildhälfte bleibt
   unangetastet - vorher lag ein Verlauf von 25 auf 85 Prozent über dem
   ganzen Bild, das hat alle Titelbilder trüb wirken lassen.
   Für die Lesbarkeit sorgt zusätzlich der Textschatten weiter unten. */
.album_tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(0,0,0,0)    0%,
		rgba(0,0,0,0)   40%,
		rgba(0,0,0,0.35) 70%,
		rgba(0,0,0,0.72) 100%);
}

/* Beim Überfahren wird die Kachel noch etwas klarer */
.album_tile:hover::before {
	background: linear-gradient(to bottom,
		rgba(0,0,0,0)    0%,
		rgba(0,0,0,0)   45%,
		rgba(0,0,0,0.28) 72%,
		rgba(0,0,0,0.66) 100%);
}

.album_tile > * {
	position: relative;
}

.album_tile_inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 142px;
}

/* Der Schatten ersetzt die frühere flächige Abdunklung: er hält die Schrift
   auch auf hellen Bildstellen lesbar, ohne das Bild selbst zu trüben. */
.album_tile_inner > span {
	text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.7);
}

.album_tile_title {
	font-family: "Times New Roman", serif;
	font-size: 19px;
	color: #ff9900;
	margin-bottom: 3px;
}

.album_tile:hover .album_tile_title {
	color: #ffb340;
}

.album_tile_date {
	font-size: 11px;
	/* Etwas heller als früher (#999) - der Untergrund ist jetzt das Foto
	   selbst und nicht mehr eine dunkle Fläche. */
	color: #ccc;
	margin-bottom: 6px;
}

.album_tile_places {
	font-size: 12px;
	color: #eee;
	line-height: 1.4;
}

/* Zielt das Sprungziel aus index.html an, damit man sieht, wo man gelandet ist */
.album_tile:target {
	border-color: #ff9900;
	box-shadow: 0 0 0 2px rgba(255,153,0,0.35);
}

/* Kachel ohne hinterlegten Google-Fotos-Link. Sichtbar markiert, damit ein
   vergessener Eintrag auffaellt statt still ins Leere zu fuehren.
   Klasse entfernen, sobald der Link eingetragen ist. */
.album_tile--todo {
	border-style: dashed;
	border-color: #664400;
	cursor: not-allowed;
}

.album_tile--todo .album_tile_title {
	color: #997700;
}

.album_tile--todo .album_tile_inner::after {
	content: "Link fehlt noch";
	margin-top: 8px;
	font-size: 11px;
	color: #997700;
	font-style: italic;
}


/* ==========================================================================
   Responsive: Das Layout oben ist das unveraenderte 1000px-Desktop-Design.
   Ab hier wird es fuer schmale Fenster und Telefone umgebaut.
   ========================================================================== */

/* Tablet / kleines Fenster: Polsterung schrumpfen, damit der Text Luft behaelt */
@media (max-width: 900px) {
	#main_content {
		padding: 0 40px;
		margin-right: 200px;
	}

	.news {
		padding-right: 20px;
	}
}

/* Telefon: Sidebar unter den Inhalt, alles einspaltig */
@media (max-width: 720px) {
	body {
		font-size: 15px;
	}

	/* Im Quelltext steht #rightbar vor #main_content, weil es auf dem Desktop
	   nach rechts floatet. Einspaltig stuende die Sidebar damit ueber den
	   Beitraegen - deshalb hier die Reihenfolge explizit setzen. */
	div#wrapper {
		display: flex;
		flex-direction: column;
	}

	#header       { order: 1; }
	#main_content { order: 2; }
	#rightbar     { order: 3; }
	#south        { order: 4; }

	#main_content {
		padding: 0 16px;
		margin-right: 0;
		/* Die senkrechte Trennlinie ergibt einspaltig keinen Sinn mehr */
		background-image: none;
	}

	#rightbar {
		width: 100%;
		float: none;
		padding: 0 16px;
		margin-top: 40px;
		/* Sidebar gehoert einspaltig ans Ende, nicht an den Anfang */
		border-top: 1px dotted #cc6600;
		padding-top: 30px;
	}

	.sidebox {
		margin-bottom: 30px;
	}

	.news {
		padding: 12px 0 24px 0;
		margin-bottom: 40px;
	}

	/* Datum ueber die Ueberschrift statt daneben - nebeneinander wird es zu eng */
	.news_date {
		float: none;
		display: block;
		margin-top: 0;
		margin-bottom: 4px;
	}

	.news_title {
		font-size: 18px;
	}

	/* Lange URLs und Hindi-Text sollen umbrechen statt seitlich rauszulaufen */
	.news_message {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	#south {
		position: static;
		height: auto;
		padding: 8px 0;
		margin-top: 30px;
	}

	div#wrapper {
		padding-bottom: 0;
	}
}