@import url(normalize.css);
@import url("//fonts.googleapis.com/css?family=EB+Garamond&text=ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜabcdefghijklmnopqrstuvwxyzäöüß,.;:'@©»«()-/ 0123456789"); /* Ziffern sind Minuskeln */

*, *:before, *:after { box-sizing: border-box; }

/* Typographie */

html { font-family: 'EB Garamond', serif; font-size: 1.125rem; color: #444; min-height: calc(100% + 1px); /* font-variant-numeric: ordinal; */ }
h1 { font-size: 3em; font-size: 6vw; margin: 0 15%; text-shadow: 0px 2px 6px rgba(0,0,0,0.4); }
@media only screen and (min-width: 120em) { h1 { font-size: 7.2rem; } }
h2, h3, h4, p, li, dl, dt, address { max-width: 40em; line-height: 1.4; }
.termine div, .termine p b { font-family: "Lucida Grande", Lucida, Verdana, sans-serif; font-size: .7778rem; }
.termine b { font-weight: bold; font-size: 1rem; }
/* ab 50em Breite wächst der Zeilenabstand proportional */
/* @media only screen and (min-width: 50em) { p { line-height: 2.8vw; } } */

aside p { line-height: 1; }

footer p { margin: 0 auto; text-align: center; }

/* Layout */

#wrapper { max-width: 120em; margin: 0 auto; }

header, article, aside, footer { padding: .5rem; }
header div { 	padding: .5rem; }
nav { padding: .1rem; }
article, aside { margin-bottom: 2em; } /* hält den footer frei */
footer { position: fixed; bottom: 0; left: 0; right: 0; }

header { position: relative; } /* Header: Home-Link */
header a.bernau { display: block; position: absolute; top: 0; left:   0; width: 80%; height: 100%; }
header a.lvbi   { display: block; position: absolute; top: 0; left: 80%; width: 10%; height: 100%; }
header a.dib    { display: block; position: absolute; top: 0; left: 90%; width: 10%; height: 100%; }

section { position: relative; }

/* Color */

img, .text-box { border: 1px solid hsl(30, 60%, 50%); }

/* Background */

html { background-color: hsl(45, 90%, 85%); }

header { background-color: hsl(43, 100%, 50%); 
	background: radial-gradient(ellipse at 30% top, hsl(48, 100%, 70%), hsl(38, 100%, 50%)); }

header div { background: 
		url(images/imkerverein-bernau-logo.png) 1% no-repeat, 
		url(images/dib-deutscher-imkerbund-logo.png) 99% no-repeat,
		url(images/lvbi-landesverband-brandenburgischer-imker-logo.png) 88% no-repeat;
	background-size: contain, contain, contain; }

figcaption { background-color: hsl(45, 90%, 75%); }

footer { background-color: hsla(43, 100%, 50%, .8);
	background: radial-gradient(ellipse at 70% bottom, hsla(48, 100%, 70%, .8), hsla(38, 100%, 50%, .8)); }

/* Allgemeines */

ul { padding-left: 1rem; /* list-style: url(wabe.svg); */ }
li { margin: 0 1rem; }

figure { max-width: 40em; margin: .5rem 0; }
img { width: 100%; padding: .25rem; } /* display: block; verhindert die Lücke zu figcaption */
figcaption { width: 100%; padding: .125rem .25rem; }

.text-box { padding: .25rem; }
.text-box *:first-child { margin-top: 0; }
.text-box *:last-child { margin-bottom: 0; }

hr { width: 70%; color: hsl(16, 40%, 15%); }

dt { margin-top: 1rem; }
dd { white-space: pre-line; }

.nowrap { white-space: nowrap; }

.a-nowrap a { white-space: nowrap; }

/* .termine: Seite termine enthält ul, li…; Seite index enthält rechts aktuelle Termine als p */

.termine li { float: left; width: 100%; margin: .25rem 0; position: relative; }
.termine div { float: left; margin-right: .8em; }

ul.termine { padding: 0; list-style: none; }
.termine li { padding: .5rem; border: 2px solid hsl(43, 100%, 50%); box-shadow:0px 2px 6px rgba(0,0,0,0.25); }
.termine li:last-of-type { margin-bottom: 1rem; }
.termine div { text-align: center; background-color: hsl(43, 90%, 70%); border: .125rem solid hsl(43, 90%, 50%); border-radius: .4rem; vertical-align: top; }
.termine div b { display: block; width: 5.5em; padding: .2222rem .3333rem; border-bottom: 2px solid hsl(43, 90%, 50%); }
.termine span { display: inline-block; width: calc(100% - 6.5rem); } /* nur notwendig, falls der Termin sonst unter das Datum fließt */
.termine .alt, .termine .alt a { color: #888; border-color: hsla(43,100%, 50%, .4); }
.termine .alt:after { content: "✓"; font-size: 2em; position: absolute; right: .25em; bottom: 0; }

.termine p { padding-left: .75rem; text-indent: -.75rem; }

/* Links */

article a[href], aside a[href] { padding: .5rem; margin: -.5rem; }
a:link    { color: hsl(16, 40%, 25%); }
a:visited { color: hsl(16, 40%, 40%); }

a:hover, a:focus { text-decoration: none; }
a[href]:hover  { color: hsl(16, 40%, 25%); text-decoration: underline;  }
a[href]:focus  { color: hsl(16, 40%, 25%); text-decoration: underline; background-color: hsl(30, 60%, 70%); }
article a[href]:active, aside a[href]:active { color: hsla(16, 40%, 25%, .5); text-decoration: underline;  }

/* Header: Home-Link */

header a[href]:hover, header a[href]:focus { background-color: hsla(30, 60%, 70%, .5); }

/* Navigation */

nav { padding: 0.01rem; }
nav li { display: inline; margin: 0; }
nav a { display: inline-block; width: 100%; height: 100%; }

nav { background-color: hsl(30, 60%, 60%);
	background: linear-gradient(hsl(30, 60%, 52%), hsl(30, 60%, 60%) 30%, hsl(30, 60%, 60%) 70%, hsl(30, 60%, 55%)); }
nav ul { list-style: none; padding-left: 0; margin: .125rem; }
nav a { background-color: hsl(30, 60%, 56%); border: .125rem hsl(30, 60%, 50%) solid; }
nav a { padding: .3rem .6rem; margin: .0625rem; }
nav a[href] { background-color: hsl(30, 60%, 70%); text-decoration: none; }
nav a[href]:hover { background-color: hsl(30, 60%, 62%); transition: all .1s ease-in-out 0s; }
nav a[href]:focus { background-color: hsl(30, 60%, 62%); transition: all .1s ease-in-out 0s; }
nav a[href]:active { background-color: hsl(30, 60%, 56%); }

aside.nav { margin: 0; }
aside.nav h3 { display: inline-block; margin: 0; }
aside.nav h3:after { content:"  →"; }
aside.nav ul { display: inline; list-style: none; padding-left: 0; margin: .125rem; }
aside.nav li { display: inline; margin: .125rem; }

/* Spezielles */

table { margin-bottom: 1rem; caption-side: bottom; }
.table { display: table; margin-top: 1.5rem; margin-bottom: 1rem; }

td, .td { padding: 0 .5rem; }
td:first-child, .td:first-child { padding: 0 .5rem 0 0; }
td:last-child, .td:last-child { padding: 0 0 0 .5rem; }

.td { display: table-row; }
.td:first-child { border-right: .125rem hsl(30, 60%, 50%) solid; min-width: 55%; }
.td:last-child { border-left: .125rem hsl(30, 60%, 50%) solid; }
.td h3:first-child { margin-top: 0; }

.real-table { border-collapse: collapse; empty-cells: show; }
.real-table td, .real-table th { padding: .3333rem; border: 2px solid hsl(30, 60%, 50%); }

.literatur th { text-align: left; padding-top: .5rem; padding-bottom: .5rem; }

.float-right { float: right; margin: 0 0 .5rem .5rem; max-width: 30%; }
.float-left { float: left; margin: 0 .5rem .5rem 0; max-width: 30%; }

.max-width-40 { max-width: 40%; }
.max-width-50 { max-width: 50%; }

.clear { clear: both; }

.pre-line { white-space: pre-line; }

.icon { float: left; height: 2.6em; margin-right: .8em; stroke: hsl(16, 40%, 40%); padding: .25rem; box-shadow: 0px 2px 6px rgba(0,0,0,0.4); }

:target { background-color: hsl(30, 60%, 70%); } /* Seitenmenü */

.weak { opacity: .5; }

/* Responsive Layout, Mobile First */

@media only screen and (min-width: 30em) {
	nav a { width: auto; }
	}

@media only screen and (min-width: 45em) {
	img { padding: .5rem; }
	figcaption { padding: .25rem .5rem; }
	.zwei-bilder img { max-width: 49%;}
	.drei-bilder img { max-width: 32.8%; }
}

@media only screen and (min-width: 60em) {
	nav { padding: 0.01rem 15%; }
	nav li { margin: 0 1% 0 0; }
	.td { display: table-cell; padding-right: 1rem; } /* leere Tabellentags können weggelassen werden, Tabelle nur mit tr oder nur mit td */

	#content { overflow: hidden; }
	article { width: 67%; margin-left: 15%; float: left; }
	aside { width: 15%; margin-left: 85%; }

	aside.nav { position: fixed; left: 0; width: 15%; }
	aside.nav h3 { display: block; margin: 0 0 1rem 0; }
	aside.nav h3:after { content:""; }
	aside.nav ul { display: block; }
	aside.nav li { display: block; }
	aside.nav a { text-decoration: none; }

	.hide-wide { display: none; }
}