/* Einbinden der Formular-CSS */ 
@import url("style-formular.css");
@import url("newsletter-formular.css");


/* Allgemeines */
body {
	background:#ffffff; 
	color:#000000; 
	font-weight:110; 
	font-family:Arial, Helvetica, Verdana, sans-serif; 
	font-size:1.0em; 
	margin:0em; 
	padding:0em; 

	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}
/* ---oben--- hyphens dient der Silbentrennung mit Trennstrich, lang de ist in der html vermerkt. Crome versteht die hypens nicht 
              daher ich in seltenen Fällen ein ­ (­ = Soft Hyphen) eingefügt habe z.B Verbesserungs­vorschläge */



/* Einfaches Styling */
form { max-width: 500px; margin: 20px auto; }
input, textarea { width: 100%; padding: 10px; margin-bottom: 10px; }
button { padding: 10px 20px; }
.hidden { display: none; } /* Honeypot unsichtbar */
.error { color: red; }
.success { color: green; }




/* Magazin-Link Standardzustand */
a.magazin-link {
  color: #886a08;          /* Linkfarbe */
  text-decoration: none;   /* keine Unterstreichung */
  transition: color 0.2s ease, text-decoration 0.2s ease; /* weicher Übergang */
}

/* Magazin-Link Hover-Zustand */
a.magazin-link:hover {
  text-decoration: underline; /* Unterstreichung bei Hover */
  color: #886a08;             /* optional etwas hellerer Ton beim Hover */
}

/* Vergrößert den Abstand zwischen den Buchstaben */ 
.grossabstand {letter-spacing: 0.5em;}

/* Vergrößert den Abstand zwischen den Jahreszahlen für Photos for Websites */ 
.year-link {
  margin-right: 16px;   /* Abstand */
  display: inline-block; /* verhindert zentrierte Gruppierung */
  text-align: left;     /* lokale Justierung */
}

/* START - Grundlayout für die Galerie photos-for-websites.php */
  .gallery img {
    width: 200px;
    margin: 5px;
    display: none; /* Standardmäßig ausgeblendet */
  }

/* Dropdown optisch größer und klarer gestalten photos-for-websites.php */
  select {
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f8f8f8;
    color: #333;
    transition: all 0.2s ease;
    cursor: pointer;
    outline: none;
  }

  select:hover {
    border-color: #999;
    background-color: #f0f0f0;
  }

  select:focus {
    border-color: #666;
    background-color: #fff;
  }

  select option {
    padding: 10px;
  }
/* ENDE - Grundlayout für die Galerie photos-for-websites.php */


/* Zitate */ 
blockquote p:before { content: ' „ ' ' '; color:#886A08; font-family:Georgia, serif; }
blockquote p:after { content: ' ' ' “ '; color:#886A08; font-family:Georgia, serif; }

.einfachquote {
    color:#886A08;
    font-family:Georgia, serif; }

.fototagebuchprivat  {
    background: #eff3f5;
    padding:0.5em;
    display:block; }

.widerrufsbelehrung {
    border-color:black; 
    border-style:solid;
    border-width:0.1em;
    padding:0.5em;
    display:block; }

/* Markierung durch Doppelklick */ 
::-moz-selection {
    background: #E7E731;
    color: #000;
    text-shadow: none; }

::selection {
    background: #e9d2fd;
    color: #000;
    text-shadow: none; }

.blackblack {
    color:#000000;
    background: #000000;}

.textmarker0 {
    color:#a81326;
    background: #feed00;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em; }

.textmarker {
    background: #E7E731;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em; }

.textmarker2 {
    background: #b2d6f3;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em; }

.textmarker3 {
    background: #4ac96f;
    color:#ffffff;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em; }

.textmarker4 {
    background: #e9e9e7;
    color:#fe7803;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em; 
    border-radius: 99.9rem; }

.textmarker5 {
    background: #e9e9e7;
    color:#788dc2;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }

.textmarker6 {
    background: #000000;
    color:#feed01;
    font-weight:bold;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }

.textmarker7 {
    background: #feed01;
    color:#000000;
    font-weight:bold;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }

.textmarker8 {
    background: #e9d2fd;
    color:#000000;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;}

.moodboardgelb {
    background:#D8D8D8;
    color:#FFFF00;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }
.moodboardrot {
    background:#ffffff;
    color:#FF0000;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }
.moodboardblau {
    background:#ffffff;
    color:#0000FF;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }
.moodboardviolet {
    background:#ffffff;
    color:#DF01D7;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }
.moodboardgruen {
    background:#ffffff;
    color:#00FF00;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }
.moodboardorange {
    background: url(../foto-allgemein/round-number.png) no-repeat;
    color:#FF8000;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }
.moodboardrosa {
    background:#ffffff;
    color:#ffc0cb;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }
.moodboardschwarz {
    background:#D8D8D8;
    color:#000000;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }
.moodboardweiss {
    background:#D8D8D8;
    color:#e9e9e7;
    color:#ffffff;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }
.moodboardbraun {
    background:#ffffff;
    color:#8A4B08;
    padding-right:0.2em;
    padding-left:0.2em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    border-radius: 99.9rem; }

.premiuminhalte {
    font-weight:bold;
    background-color: #e21b18;
    color: white;
    border-radius: 30%;
    padding: 0.1em 0.4em; }

.fade-text {
  background: linear-gradient(to right, #000 0%, #000 70%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.weekly {
    color:#788dc2;
    font-weight:bold;
    background: #dee1e6;
    padding:0.5em;
    display:block; }

.weeklysmall{
	color:#808080;
	font-size:0.7em;
}

.bonusprogramm {
    color:#886A08;
    font-weight:bold;}

.angebotfotoreise {
    background: #886A08;
    color:#ffffff; 
    padding-right:0.5em;
    padding-left:0.5em;
    padding-top:0.2em;
    padding-bottom:0.2em;
    font-size:1.0em; }


/* Event für die Index-Seite */
.event {
	padding:1.0em 1.25em 1.0em 1.25em;
	display:block;
	background:#eff3f5;
	border-top:0.1em solid #000000;
	border-bottom:0.1em solid #000000;
	width:94%; }

.eventzwei {
	padding:1.0em 1.25em 1.0em 1.25em;
	display:block;
	background:#3c9ddb;
    	color:#ffffff;
	border-top:0.1em solid #ffffff;
	border-bottom:0.1em solid #ffffff;
	width:94%; 
	border-radius: 1.9rem; }

.eventdrei {
	padding:1.0em 1.25em 1.0em 1.25em;
	display:block;
	background:#516d5b;
    	color:#ffffff;
	border-top:0.1em solid #ffffff;
	border-bottom:0.1em solid #ffffff;
	width:94%; 
	border-radius: 1.9rem; }

.eventdrei a { 
	color:#fdd07e; }

.eventdrei a:hover { 
	color:#f7f301; }


.eventvier {
	padding:1.0em 1.25em 1.0em 1.25em;
	display:block;
	background:#e94235;
    	color:#ffffb2;
	border:0.1em solid #e94235;
	width:94%; 
	border-radius: 1.9rem; }

.eventfuenf {
	padding:1.0em 1.25em 1.0em 1.25em;
	display:block;
	background:#d73449;
    	color:#ffffff;
	border:0.1em solid #d73449;
	width:94%; 
	border-radius: 1.9rem; }

.eventsechs {
	padding:1.0em 1.25em 1.0em 1.25em;
	display:block;
	background:#c2cdc5;
    	color:#000000;
	border:0.1em solid #c2cdc5;
	width:94%; 
	border-radius: 1.9rem; }

.underline {
	text-decoration: underline; }

.kursiv {
	font-style: italic; } 

.zitat {
	font-style: italic;
	color:#886A08; }

/* Show clickable image on link hover */ 
.hover_img a span 	{
	position:absolute;
	display:none;
	z-index:99; }

.hover_img a:hover span	{
	display:block;
	padding:0.8em;
	margin:-0.4em;
	border:0.1em solid #ffffff;
	background-color:#ffffff; }

/* Pseudoklase :target für Info-Autor. Wird aktiviert wenn Element angesprungen  */
.details {
	display:none; }

.details:target {
	display:block;
	background:#eff3f5; }


/* Strong ist semantisch stärker als b */
.strong, b { 
	font-weight:bold; }


/* Bewertungsstern für Sehenswürdigkeiten */
.tippb a { 
	color:#ff7f50; }

.tippb a:hover { 
	color:#ff7f50; }

.tippb { 
	color:#ff7f50; }

address { 
	font-weight:100;
	line-height:1.5em;
	color:#000000;
	margin:0em;
	padding:1.0em 1.25em 1.0em 1.25em;
	text-align:left;
	font-style:normal; }


/* Links */

a { 
	color:#0000FF; 
	text-decoration:none; }

a:hover { 
	color:#886A08; }

.details a:hover { 
	color:#ffffff; background:#886A08; }


/* Links: Nicht anklickbarer Link */
.nolink { 
	color:#808080; }

/* Links: Nicht anklickbarer Link, Bewertung der Reiseziele, Sicherheit-Sterne */
a.sicherheitsterne {
    color: black;           /* Textfarbe schwarz */
    text-decoration: none;  /* Unterstrich entfernen */
}

a.sicherheitsterne:hover {
    color: black;           /* Textfarbe beim Hover schwarz */
    text-decoration: none;  /* Unterstrich beim Hover entfernen */
}

.nolinkzwei { 
	color:#886A08;
	font-weight:bold; }

.stockfotosCounter {
	padding: 0.30em;
	text-overflow: nowrap;

}

a.portfolio {
    margin-right: 0.4em;
    color:#014c8c;
}

a:hover.portfolio {
    margin-right: 0.4em;
    color:#014c8c;
    text-decoration:underline;
}


/* Überschriften */
h1 {
	font-size:1.6em;
	font-weight:110;
	line-height:1.350em;
	color:#000000;
	margin:0em;
	padding:1em 1.8em 0.5em 0.7em;
	text-align:left;
	border-bottom:0.1em solid #ebebeb;
}
h1 .start {
    color:#886A08;
    display:block;
    font-size:0.8em;
    letter-spacing:0.05em;
    padding-bottom:1.0625em;
}
/* Überschriften: h2 für Seitenleiste rechts */
aside h2 {
	font-size:1.3em;
	font-family:Helvetica;
	font-weight:100;
	line-height:1.5em;
	color:#000000;
	margin:0em;
	padding:0em 1.8em 0em 1.25em;
	text-align:left;
	background:#eff3f5;
}
h2 {
	font-size:1.563em;
	font-family:Helvetica;
	font-weight:100;
	line-height:1.5em;
	color:#000000;
	margin:0em;
	padding:0.8em 1.8em 0em 1.25em;
	text-align:left;	
}
h3 {
	font-size:1.2em;
	font-weight:110;
	font-family:Helvetica;
	line-height:1.5em;
	color:#886A08;
	margin:0em;
	padding:0.8em 1.8em 0em 1.25em;
	text-align:left;	
}


/* Für Stadtinterna auf der Reiseführerseite */
stadtintern {
	line-height:2.1em;
	text-align:left;
}
/* Allgemeines: Bewertungsstern der Sehenswürdigkeit */
.stern {
	color:#FF0000;
	font-weight:bold;
}
/* Allgemeines: Nur als Farbe */
.rot {
	color:#8A0808;
}

.ochsenblut {
	color:#ac2601;
}

.weiss {
    color:#ffffff;
}

.graurosa {
    color:#8c767b;
}


.gelborange {
    color:#ffff01;
}

.rotorange {
    color:fd6600;
}

.gelbgruen {
    color:0cff00;
}

.rotpfeil {
	color:#000000;
	padding:0.1em 0.1em 0.1em 0.1em;
}

.ausgebucht {
	color:#8A0808;
	background-color:#FFFF00;
}

/* noch nicht in Verwendung evt. für Reiseführer Update */
.schlagwoerter
{
	line-height:2.1em;
}

/* Datenschutzhinweise Gesetz */
.datenschutzhinweis {
	color:#008080;
	font-weight:bold;
}


/* Kalendermonate */
.kalendermonat {
	color:#886A08;
	font-weight:bold;
}

.wissenswert {
	display:block;
	text-align:left;
	padding-top:0.5em;
	border-top:0.05em solid #000000;
}

.monat {
	display:block;
	text-align:left;
	padding-top:0.5em;
	font-weight:bold;
	border-bottom:0.05em solid #000000;
}

.durchstrich {
	text-decoration: line-through black 0.1em;
}


/* Verhindert, dass ein Wort umgebrochen wird */
.keinUmbruch {
	white-space: nowrap;
}


/* Unter-Unterteilung bei Praktische Informationen - Anreise - Bahnhöfe */
.unterteilung {
	color:#886A08;
	font-weight:bold;
}

/* Allgemeines: Werbung */
.anzeige{
	color:#808080;
	font-size:0.7em;
}

/* Allgemeines: wie Werbung aber nowerbung */
.noanzeige{
	color:#808080;
	font-size:0.7em;
}


/* Datum des Beitrags auf der Indexseite vorläufig */
.datumbericht{
	text-transform: uppercase;
	font-size:0.7em;
	color:#886A08;
}

/* Die eigene Haupt-Werbung */
.anzeigex{
	background-color:#FFFFFF;
	padding:0.2em 1.8em 0em 1.25em;
	border-left:1.05em solid #000000;
}

/* Die eigene Navi-Werbung */
.anzeigenav {
	display:block;
	font-size:1.1em;
	text-align:left;
	border: 0.1em solid #ebebeb;
	border-radius:33px;

}

.anzeigenav:hover {
	display:block;
	font-size:1.1em;
	text-align:left;
	border: 0.1em solid #886A08;
	background-color:#fffff0; ;
	border-radius:33px;
	box-shadow:0 0 10px rgba(0,0,0,0.2);
}

/* Link der eigenen Werbung */
.lianzeiges {
	font-weight:bold;
}

/* Sehenswertes Reiserundreise Reiseziel */
.reiserundreise {
	background-color:#eff3f5;
	color:#886A08;

	padding:0.2em 0.2em 0.2em 0.2em;
}

/* Alphabetenliste zum Beispiel reisefotografie-spanien */
.alphabet{
	padding:0.4em 0.4em 0.4em 0.4em;
}

/* Interne Strukturen */
p {
	font-weight:100;
	line-height:1.5em;
	color:#000000;
	margin:0em;
	padding:1.0em 1.25em 1.0em 1.25em;
	text-align:left;
}
ul {
	margin:0em;
	padding:0em;
}
li {
	list-style:square;
	font-weight:100;
	line-height:1.25em;
	color:#000000;
	margin:0.8em 0em 0em 0em;
	padding:0.4em 0em 0.4em 0em;
	height:10px;
}
nav ul li a.active {
	border-bottom:0.1em solid #886A08;
}
/* IMG-Größe bezieht sich auf die Breite des Elternlements */ 
img {
	width:98%;
	height:auto;
	max-width:100%;
}
/* Bilduntertext */
figcaption {
	font-weight:100;
	line-height:1.25em;
	color:#000000;
	margin:0em;
	padding:0em 1.5em 0em 1.5em;
	text-align:left;
	display:block;
	color:#000000;
}

figcaption .copyright {
	color:#777777;
}

/* On Top Bar */ 
#menubar {
	display:block;
}
#menubar ul {
	display:block;
	width:2em;
	padding:0.9em;
}
#menubar ul li {
	display:inline;
}
#menubar ul li a.menubutton {
	display:none;
}

/* Header mit der Navigation */ 
header {
	display:block;
	text-align:left;
}
.header {
	font-size:0.5em;
	line-height:0em;
	font-weight:100;
	color:#4439ba;
	margin:0em;
}

/* Navigation */ 
nav {
	display:block;
	height:2.500em;
	text-align:center;
	border:0.1em solid #eff3f5;
}
nav ul {
	display:block;
	margin:0em;
	padding:0em;
}
nav ul li {
	display:inline; 
	margin:0em 0.188em 0em 0.188em;
}
nav ul li a {
	font-size:1.1em;
	line-height:2.500em;
	color:#4439ba;
	padding:0.563em 0.938em 0.375em 0.938em;
}
nav ul li a:hover {
	font-size:1.1em;
	line-height:2.5em;
	color:#886A08;
	padding:0.563em 0.938em 0.375em 0.938em;
}

/* Link-Auflistungen im Dokument */ 
.list {
	margin:0em;
	padding:0em;
}
.list li {
	text-align:left;
	list-style:square;
	font-weight:100;
	line-height:1.25em;
	color:#000000;
	margin:0.8em 0em 0em 3em;
	padding:0.4em 0em 0.4em 0em;
	height:10px;
}

/* Content Area. Der eigentliche Hauptinhalt */ 
#main {
	display:block;
	width:96%;
	max-width:980px;
	margin:1.25em auto;
	padding:0em;
}
#main article {
	display:inline-block;
	width:60.3%;
	vertical-align:top;
	margin:0em;
	padding:0em;
	text-align:center;
}
#main article img {
	max-width:560px;
}
#main aside {
	display:inline-block;
	width:30.6%;
	margin-left:3%;
	padding:0em;
	vertical-align:top;
}
#main aside section {
	margin-top:1.563em;
	border:0.1em solid #eff3f5;
	}
#main aside section:first-child {
	margin-top:0em;
}
#main article h2 {
	font-size:1.2em;
	padding:1em 1.8em 1em 1.0em;
}
#main aside section ul {
	padding:0px 1.875em 1.55em 2.5em;
}

/* Footer */ 
footer {
	display:block;
	background:#2f2c2c;
	text-align:center;
}
footer ul {
	display:block;
	width:100%;
	max-width:980px;
	text-align:left;
	margin:0px auto;
}
footer ul li {
	display:inline;
	font-size:0.8em;
	line-height:2.8em;
	color:#e2dbdb;
	padding:0px 0.625em 0px 0.625em;
}

footer ul li a {
	color:#a7b0ad;
}

footer ul li a:hover {
	color:#ffffff;

}
.abcnav {
    	text-transform: uppercase;
   	display: inline-block;
	margin:0.9em 1.5em 1.5em 0.9em;
	text-align:left;
}

.kolumnen {
   	display: inline-block;
	margin:0.9em 1.5em 0.2em 0.9em;
	text-align:left;
}

.abcnav:after {
	content: "";
}

.number {
	background: url(../foto-allgemein/round-number.png) no-repeat;
	background-size: 24px 24px;
	width: 24px;
	height: 24px;
	color:#000;
	display: inline-block;
	margin-left:10px;
	margin-right:10px;
	vertical-align: top;
	float: left;
	font-size:14px;
	font-weight:bold;
}

.numbersw {
	background: url(../foto-allgemein/round-number-sw.png) no-repeat;
	background-size: 24px 24px;
	width:24px;
	height:24px;
	color:#fff;
	display: inline-block;
	margin-left:10px;
	margin-right:10px;
	vertical-align: top;
	float: left;
	font-size: 14px;
	font-weight:bold;
}
/* Print Style */ 
@media print {
	header, werbung, footer {display:none;}
	#main aside section {font-size:14px;
	}

}

/* Mobile Style */ 
@media screen and (max-width:800px) {
	body {
			font-size:90%;
		}
}
@media screen and (max-width:600px) {
	#main aside, #main article {
		color:#000000;
		width:100%;
		display:block;
		margin:0.625em 0em 0.625em 0em; 
	}
}
@media screen and (min-width:550px) {
	nav.nav {
		display:block !important;
	}
}
@media screen and (max-width:550px) {
	body {
		color:#000000;
		font-size:86%;
	}
	#menubar ul li a.menubutton {
		display:block;
	}
	nav {
		display:none;
		height:auto;
	}
	nav ul li {
		display:block;
		margin:0em 0em 1.9em 0em;
	}
}