/* ALLES */

* {
	padding:0;
	margin:0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	background-color:#fffff8;
  font-family:"Arial","Verdana",sans-serif;
}

.clear {
	clear:both;
	height:1px;
}

/* CONTENT-BEREICH */

.site-area {
	padding-top:0;
  margin:0 auto;
	position:relative;
  background-image:url("images/hintergrund-jack.svg");
  background-repeat:repeat-y;
  background-size:100% auto;
  width:90%;
	padding:0 5% 0 5%;
}

.content {
	width:80%;
	padding:0 10% 0 10%;
}

.kopfbereich {
	background-color:#ffffee;
}
.kopfbereich h1 {
  font-size: 1.75rem;
}
.kopfbereich p {
	margin-bottom:0;
	padding-bottom:1rem;
	border-bottom:1px solid #ccc;
}
.kopfbereich + nav {
	margin-top:0;
}
.kopfbereich + p,
.kopfbereich + h2,
img + p {
	margin-top:1.5rem;
}

h2 {
  font-size: 1.5rem;
	margin-bottom:1.5rem;
	margin-top:1.5rem;
}

h3 {
  font-size: 1.25rem;
		margin-bottom:1.25rem;
	margin-top:1.25rem;
}

form, input, textarea {
	min-width:20px;
}

h4, p, td, tr, ul, ol, li, input, select, textarea {
  font-size: 1rem;
}
select {
	padding:0 0.5rem;
}



p, br, ol, ul, li {
	hyphens: auto;
	line-height:1.5;
}

p + p {
	margin-bottom:1.5rem;
}

p.refrain {
	padding-left: 1rem;
	border-left: 1px solid #000;
}

ul {
	margin-left:1.5rem;
}

ol {
	margin-left:1.5rem;
}

ol li,
ul li {
	padding-bottom:0.5rem;
}

ol li ol li:last-child {
	padding-bottom:0;
}

/* TABELLEN */

.table-container {
	overflow:scroll;
	padding:1rem 0;
}

table {
	border: none;
	border-collapse:collapse;
	width:100%;
}

table tr {
	height:1.5rem;
		border-bottom:1px solid #999;
		
}

table tr:nth-child(even) {	
	background-color:#f8f8f8; 
}

table tr th {
	background-color:#eee;
	text-align:left;
	vertical-align:bottom;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
	padding:0.1rem 0.5rem 0.1rem 0.5rem;
}

table tr td {
	background-color:rgba(255,255,255,0.1);
	
	vertical-align:top;
	padding:0.25rem 0 0.25rem 0;
}
table tr td.erste { 
	text-align:right;
	padding-right:0.5rem;
}
table tr td.keyword { 
	font-weight:bold; 
}

table tr td table,
table tr td table tr,
table tr td table tr td {
	background:transparent;
	border:0 solid #000;
}

/* GIF-ANIMATION */

.gif-animation {
	position:relative;
	margin:2rem 0;
}

.gif-animation img {
	width:100%;
	height:auto;
}

/* HYPERLINKS */

a,
a:link {
  color:#f60;
  text-decoration:none;
}

a:hover {
  color:#ff9933;
  text-decoration:none;
}

.download-kasten {
	background-color:#eee;
	padding:1rem;	
	margin:1rem 0 1rem 0;
	font-weight:bold;
}

.gif-animation > img,
.feature-image > img {
		border:1px solid #99999980;
}

.gif-animation p,
.feature-image p {
	font-size:0.7rem;
	margin:0;
}

.feature-image img {
	width:100%;
	height:auto;
}

video {
	width:100%;
	height:auto;
}

/* FOOTER */

.footer {
	padding-top:1rem;
	border-top:2px solid #666;
	margin-top:4rem;
}

nav.menu-footer {
	border-width:0;
	justify-content:space-between;
}

.site-footer {
  text-align:center;
  border-top:1px solid #636738; /* dunkel */
  padding-top:10px;
  margin-bottom:160px;
}

.footer-gradient {
  width:100%;
	left:0;
  height:160px;
  position:absolute;
  bottom:0;
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}


/* NAVIGATION */

nav {
	background-color:#ffffee;
	line-height:1.0;
	min-height:2rem;
	width:100%;
	display:flex;
	justify-content:start;
	align-items: center;
	align-content: center;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
}

nav ul {
	line-height:1.0;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap: wrap;
	list-style-type:none;
	/* Safari hack, see https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
	list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); 
} 

nav li {
	line-height:1.0;
	font-weight:bold;
  margin: 0.5rem 1rem 0 0;  
	padding:0;
}

nav li.current {
	border-bottom: 3px solid #000;
}

nav li.current a {
	color:#000;
	font-weight:bold;
}

.chronik-nav {
	background-color:#ffffee;
	line-height:1.0;
	min-height:2rem;
	width:100%;
	display:flex;
	justify-content:start;
	align-items: center;
	align-content: center;
	padding-top:0.5rem;
	padding-bottom:2rem;
}
.chronik-nav div {
	text-align:center;
		line-height:1.0;
  margin: 0.5rem 1rem 0 0;  
	padding:0;
}


/* USERDB.php -- Wir > Mitgliederliste - Zeile 691ff */

.userdb-list-container {
	display:grid;
	justify-content:space-evenly;
	grid-template-columns: auto;
	column-gap:1rem;
	row-gap:1rem;
}

/* EM Teilnehmende Liste */

.em-all-runners-container {
	display:grid;
	width:100%;
	justify-content:space-between;
	grid-template-columns: auto;
}

.em-all-runners-container div {
	text-align:left;
	padding:0.5rem;
	border:1px dotted #ff9933;
}

.em-all-runners-container div.nichtgelaufen {
  color:#999;
}

.em-all-runners-container div.anderestartnr {
  color:rgb(247, 45, 45);
}

/* WIR > Satzung */

.paragraph {
	margin-bottom:1rem;

}

.paragraph p {
	font-weight:bold;
}

.paragraph ol {
	padding-left:2rem;
		line-height:1.5;
}

.paragraph ol ol {
	padding-left:2rem;
	list-style-type:lower-latin;
}



/* SPALTEN */
.zweidrittel-eindrittel,
.eindrittel-zweidrittel,
.zweispaltig, 
.dreispaltig, 
.vierspaltig {
	margin-top:2rem;
	display:grid;
	justify-content:space-between;
	column-gap:2rem;
	row-gap:2rem;
	grid-template-columns: 1fr;
}
.zweidrittel-eindrittel div,
.eindrittel-zweidrittel div,
.zweispaltig div,
.dreispaltig div,
.vierspaltig div {
	display:grid;
	align-content:start;
}

.heft {
	column-gap:0;

}
.heft img {
	border:1px solid #ccc;
}

.anna-vorstand {
	justify-content:start;
}

/* STARTSEITE */

.spendenstand-block {
	background-color:#fff;
	border:1px solid #f60;
	padding:1rem;
	border-radius:1rem;

} 

.gesamt-euro {
	font-size:1.5rem;
	font-weight:bold;
}

/* class NEUEGALERIE */

.thumbnail-grid-7,
.thumbnail-grid-6,
.thumbnail-grid-5,
.thumbnail-grid-4,
.thumbnail-grid-3,
.thumbnail-grid-2,
.thumbnail-grid-1 {
	column-gap:2px;
	row-gap:2px;
	display:grid;
	justify-content:stretch;
}
.thumbnail-grid-7 { grid-template-columns: repeat(3, 1fr); }
.thumbnail-grid-6 { grid-template-columns: repeat(3, 1fr); }
.thumbnail-grid-5 { grid-template-columns: repeat(3, 1fr); }
.thumbnail-grid-4 { grid-template-columns: repeat(3, 1fr); }
.thumbnail-grid-3 { grid-template-columns: repeat(3, 1fr); }
.thumbnail-grid-2 { grid-template-columns: repeat(2, 1fr); }
.thumbnail-grid-1 { grid-template-columns: repeat(1, 1fr); }

.thumbnail-grid-7 a img,
.thumbnail-grid-6 a img,
.thumbnail-grid-5 a img,
.thumbnail-grid-4 a img,
.thumbnail-grid-3 a img,
.thumbnail-grid-2 a img,
.thumbnail-grid-1 a img {
	width:100%;
	height:auto;
}

.neuegalerie-vollbild-container img {
	width:100%;
	height:auto;
}

.neuegalerie-vollbild-container span.metadata {
	display:none;
}

/* LOGOS OBEN */

.logo-container {	
	width:100%; 
	display:flex;
	justify-content:space-between;
	align-items: center;
	align-content: center;
	height:40px;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
}
.logo-container img { 
	display:flex;
	flex-wrap: nowrap;
}

/* SPONSORENLOGOS BLOCK */

.sponsoren-logos {
	width:100%; 
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	row-gap:2rem;
	column-gap: 2rem;
	padding: 2rem 0;
}
.sponsoren-logos img { 
	display:flex;
	height:40px;
}

/* LAUFENDHELFEN - KM */

.laufendhelfen-laeufer-km {
	margin: 1rem 0;
	padding: 0.5rem;
	background-color:#eee;
}

.laufendhelfen-laeufer-auf-strecke {
	display:grid;
	grid-template-columns: auto;
		column-gap:2rem;
	row-gap:2rem;
}

/* JAHRESKALENDER */

.article-list-container-1,
.article-list-container-2,
.article-list-container-3,
.article-list-container-4 {
	display:grid;
	margin: 1rem 0;
	padding: 0.5rem;
		column-gap:2rem;
	row-gap:2rem;
	grid-template-columns: auto;
	  -webkit-hyphens: auto; 
  hyphens: auto; 
}

.article-list-container-1 div img,
.article-list-container-2 div img,
.article-list-container-3 div img,
.article-list-container-4 div img {
	width:100%;
	opacity:50%;
	height:auto;
}

.article-list-container-1 div a img,
.article-list-container-2 div a img,
.article-list-container-3 div a img,
.article-list-container-4 div a img {
	width:100%;
	border:1px solid #f60;
	opacity:100%;
	height:auto;
}

.article-list-container-1 div a img:hover,
.article-list-container-2 div a img:hover,
.article-list-container-3 div a img:hover,
.article-list-container-4 div a img:hover {
	opacity:100%;
}

.zitat {
	text-align:right;
	font-style:italic;
}
.zitat span {
	text-decoration:none;
	font-style:normal;
}
/* Extra small devices (phones, 420px and down)  - 1rem = 14px */
@media only screen and (max-width: 420px) {
	html {
		font-size: 13px;
	}
	.logo-container a { padding-right:5px; }
	.logo-anna img { height:35px; }
	.weltoffen-logo img,
	.wortpate-logo img,
	.fb-logo img {	height:21px; }
}

/* Small devices (portrait tablets and large phones, 421px and up)  - 1rem = 14px */
@media only screen and (min-width: 421px) {
	html {
		font-size: 13px;
	}
	.logo-container {	height:59px; }
	.logo-anna img { height:49px; }
	.weltoffen-logo img,
	.wortpate-logo img,
	.fb-logo img {	height:30px; }
	.userdb-list-container,
	.em-all-runners-container,
	.article-list-container-2,
	.article-list-container-3,
	.article-list-container-4 {	grid-template-columns: repeat(2, 1fr); }
	.zweidrittel-eindrittel { grid-template-columns: 2fr 1fr; }
	.eindrittel-zweidrittel { grid-template-columns: 1fr 2fr; }
	.thumbnail-grid-7 { grid-template-columns: repeat(4, 1fr); }
	.thumbnail-grid-6 { grid-template-columns: repeat(4, 1fr); }
	.thumbnail-grid-5 { grid-template-columns: repeat(4, 1fr); }
	.thumbnail-grid-4 { grid-template-columns: repeat(4, 1fr); }
	.thumbnail-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.thumbnail-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.thumbnail-grid-1 { grid-template-columns: repeat(1, 1fr); }
	.neuegalerie-vollbild-container span.metadata { display:inline; }
}

/* Small devices (portrait tablets and large phones, 600px and up)  - 1rem = 14px */
@media only screen and (min-width: 600px) {
	html {
		font-size: 14px;
	}
	.logo-container {	height:72px; }
	.logo-anna img { height:60px; }
	.weltoffen-logo img,
	.wortpate-logo img,
	.fb-logo img {	height:35px; }
	.article-list-container-2 {	grid-template-columns: repeat(2, 1fr); }
	.userdb-list-container,
	.em-all-runners-container,
	.article-list-container-3,
	.article-list-container-4 {	grid-template-columns: repeat(3, 1fr); }
	.thumbnail-grid-7,
	.thumbnail-grid-6,
	.thumbnail-grid-5,
	.thumbnail-grid-4,
	.thumbnail-grid-3,
	.thumbnail-grid-2,
	.thumbnail-grid-1 { column-gap:0.5rem; row-gap:0.5rem;}
	.thumbnail-grid-7 { grid-template-columns: repeat(5, 1fr); }
	.thumbnail-grid-6 { grid-template-columns: repeat(5, 1fr); }
	.thumbnail-grid-5 { grid-template-columns: repeat(5, 1fr); }
	.thumbnail-grid-4 { grid-template-columns: repeat(4, 1fr); }
	.thumbnail-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.thumbnail-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.thumbnail-grid-1 { grid-template-columns: repeat(1, 1fr); }
	.zweidrittel-eindrittel { grid-template-columns: 2fr 1fr; }
	.eindrittel-zweidrittel { grid-template-columns: 1fr 2fr; }
	.zweispaltig { grid-template-columns: repeat(2, 1fr);	}
	.dreispaltig,
	.vierspaltig { grid-template-columns: repeat(3, 1fr);	}
	.laufendhelfen-laeufer-auf-strecke { grid-template-columns: repeat(2, 1fr); }
}

/* Medium devices (landscape tablets, 768px and up)  - 1rem = 15px */
@media only screen and (min-width: 768px) {
	html {
		font-size: 15px;
	}
	.logo-container {	height:84px; }
	.logo-anna img { height:70px; }
	.weltoffen-logo img,
	.wortpate-logo img,
	.fb-logo img {	height:49px; }
	.article-list-container-2 {	grid-template-columns: repeat(2, 1fr); }
	.userdb-list-container,
	.em-all-runners-container,
	.article-list-container-3,
	.article-list-container-4 {	grid-template-columns: repeat(3, 1fr); }
	.thumbnail-grid-7,
	.thumbnail-grid-6,
	.thumbnail-grid-5,
	.thumbnail-grid-4,
	.thumbnail-grid-3,
	.thumbnail-grid-2,
	.thumbnail-grid-1 { column-gap:0.5rem; row-gap:0.5rem;}
	.thumbnail-grid-7 { grid-template-columns: repeat(5, 1fr); }
	.thumbnail-grid-6 { grid-template-columns: repeat(5, 1fr); }
	.thumbnail-grid-5 { grid-template-columns: repeat(5, 1fr); }
	.thumbnail-grid-4 { grid-template-columns: repeat(4, 1fr); }
	.thumbnail-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.thumbnail-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.thumbnail-grid-1 { grid-template-columns: repeat(1, 1fr); }
	.zweidrittel-eindrittel { grid-template-columns: 2fr 1fr; }
	.eindrittel-zweidrittel { grid-template-columns: 1fr 2fr; }
	.zweispaltig { grid-template-columns: repeat(2, 1fr);	}
	.dreispaltig,
	.vierspaltig { grid-template-columns: repeat(3, 1fr);	}
	.laufendhelfen-laeufer-auf-strecke { grid-template-columns: repeat(3, 1fr); }
	.article-list-container div a img {	opacity:90%; }
} 

/* Large devices (laptops/desktops, 992px and up) - 1rem = 16px */
@media only screen and (min-width: 992px) {
	html {
		font-size: 16px;
	}
	.logo-container {	height:114px; }
	.logo-anna img { height:96px; }
	.weltoffen-logo img,
	.wortpate-logo img,
	.fb-logo img {	height:60px; }
	.article-list-container-2 {	grid-template-columns: repeat(2, 1fr); }
	.article-list-container-3 {	grid-template-columns: repeat(3, 1fr); }
	.userdb-list-container,
	.em-all-runners-container,
	.article-list-container-4 {	grid-template-columns: repeat(4, 1fr); }
	.thumbnail-grid-7,
	.thumbnail-grid-6,
	.thumbnail-grid-5,
	.thumbnail-grid-4,
	.thumbnail-grid-3,
	.thumbnail-grid-2,
	.thumbnail-grid-1 { column-gap:1rem; row-gap:1rem;}
	.thumbnail-grid-7 { grid-template-columns: repeat(6, 1fr); }
	.thumbnail-grid-6 { grid-template-columns: repeat(6, 1fr); }
	.thumbnail-grid-5 { grid-template-columns: repeat(5, 1fr); }
	.thumbnail-grid-4 { grid-template-columns: repeat(4, 1fr); }
	.thumbnail-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.thumbnail-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.thumbnail-grid-1 { grid-template-columns: repeat(1, 1fr); }
	.zweidrittel-eindrittel { grid-template-columns: 2fr 1fr; }
	.eindrittel-zweidrittel { grid-template-columns: 1fr 2fr; }
	.zweispaltig { grid-template-columns: repeat(2, 1fr);	}
	.dreispaltig,
	.vierspaltig { grid-template-columns: repeat(3, 1fr);	}
		.laufendhelfen-laeufer-auf-strecke { grid-template-columns: repeat(3, 1fr); }
	.article-list-container div a img {	opacity:90%; }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) - 1rem = 18px */
@media only screen and (min-width: 1200px) {
	html {
		font-size: 18px;
	}
	.site-area {
		width:1060px;
	}
	.logo-container {	height:136px; }
	.logo-anna img { height:108px; }
	.weltoffen-logo img,
	.wortpate-logo img,
	.fb-logo img {	height:63px; }
	.article-list-container-2 {	grid-template-columns: repeat(2, 1fr); }
	.article-list-container-3 {	grid-template-columns: repeat(3, 1fr); }
	.userdb-list-container,
	.em-all-runners-container { grid-template-columns: repeat(5, 1fr); }
	.article-list-container-4 { grid-template-columns: repeat(4, 1fr); }
	.thumbnail-grid-7,
	.thumbnail-grid-6,
	.thumbnail-grid-5,
	.thumbnail-grid-4,
	.thumbnail-grid-3,
	.thumbnail-grid-2,
	.thumbnail-grid-1 { column-gap:1rem; row-gap:1rem;}
	.thumbnail-grid-7 { grid-template-columns: repeat(7, 1fr); }
	.thumbnail-grid-6 { grid-template-columns: repeat(6, 1fr); }
	.thumbnail-grid-5 { grid-template-columns: repeat(5, 1fr); }
	.thumbnail-grid-4 { grid-template-columns: repeat(4, 1fr); }
	.thumbnail-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.thumbnail-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.thumbnail-grid-1 { grid-template-columns: repeat(1, 1fr); }
	.zweidrittel-eindrittel { grid-template-columns: 2fr 1fr; }
	.eindrittel-zweidrittel { grid-template-columns: 1fr 2fr; }
	.zweispaltig { grid-template-columns: repeat(2, 1fr);	}
	.dreispaltig { grid-template-columns: repeat(3, 1fr);	}
	.vierspaltig { grid-template-columns: repeat(4, 1fr);	}
		.laufendhelfen-laeufer-auf-strecke { grid-template-columns: repeat(3, 1fr); }
	.article-list-container div a img {	opacity:90%; }
}