@charset "utf-8";
/* # CSS zum Adventkalender 20215 von Thorsten Steinhoff, https://adventkalender.gotteslobliedergarten.de/
// ## Versionierung
- 2025-12-02 16:63 Malacandra Bereinigung
- 2025-12-01 14:58 TNO Neu-Aussetzung

### V-Chronik 2021
- 2021-12-24 09:17 (Korrektur der Bild-Anzeigegröße im Schaufenster auf Smartphones, Korrektur der Anzeige von Hyperlinks mit target-Attribut)
- 2021-12-19 08:27 (Hg-Bilder mit vier brennenden Kerzen)
- 2021-12-17 21:17 (Serifen-Schriftart Lora als Standard, rem-Schriftgröße für Header)
- 2021-12-12 20:17 (anderer Rosa-Ton für Links der 3. Adventwoche, aus Foto genommen, das Christina T. so gut gefällt. ;) )
- 2021-12-12 07:40
- 2021-12-07 21:11
- 2021-12-03 18:17
- 2021-12-02 21:05 nach Vorlage 2020-12-21 11:05
*/
@font-face {
	font-family:Garamond;
	src: url("../sc/Garamond/CormorantGaramond-Regular.ttf") format('truetype');
	font-style: normal;
	}
body {
	font-family: 'Garamond', serif; /* !20251201_1507 TNO */
	}
body footer {
	width:1000px;
margin: auto;
}

body header {
	position: relative;
	top:0px;
	left:0px;
	/* width:100%; */
	width:1000px;
	height:32px;

margin:auto;
	}
body header h1 {
	font-size:1.8rem;
	}

body section#kalender {
/* OK!2025-12-02 22:47 TNO */
	position: relative;
	top:0px;
	left:0px;

	width:1000px;
	height:520px;
	background-repeat: no-repeat;
	background-size: cover;

	border:solid thin #BBB;

	margin:auto;
	}

body.adventwoche1 section#kalender {
/* +!2025-12-02 22:47 TNO */
	background-image: url("gra/Advent-Sonntag1.jpg");
	}
body.adventwoche2 section#kalender {
/* +!2025-12-02 22:47 TNO */
	background-image: url("gra/Advent-Sonntag2.jpg");
	}
body.adventwoche3 section#kalender {
/* +!2025-12-02 22:47 TNO */
	background-image: url("gra/Advent-Sonntag3.jpg");
	}
body.adventwoche4 section#kalender {
/* +!2025-12-02 22:47 TNO */
	background-image: url("gra/Advent-Sonntag4.jpg");
	}

body section#überflieger + section#kalender {
/* OK!2025-12-02 22:47 TNO */
	display: none;
	}

body section#kalender div[id] {
/* OK!2025-12-02 22:47 TNO */
		display:block;
		position:absolute;

		top:0px;
		left:0px;

		width:140px;
		height:90px;

		text-align:center;
		vertical-align:middle;
		font-size:60px;

		border:solid thin #000;
		background-color: transparent;
		}

/* Kläppchen-Links Standard */
body section#kalender div[id] a[href] {
		display:block;
		width:98%;
		height:98%;
		text-decoration: none;
		color:#000;
		background-color:#fff;
		opacity: 0.4;
		}

body section#kalender div[id] a:hover {
	background-size: cover;
	opacity: 1;
 	}
/* A Farbe von Kläppchen-Links nach body-class adventwoche(Nr) +!20251202_2252 TNO */
body.adventwoche1 section#kalender div[id] a:hover {
	color:#FFF;
	}
body.adventwoche2 section#kalender div[id] a:hover {
	color:#E4FF35;
	}
body.adventwoche3 section#kalender div[id] a:hover {
	color:#DC698A;
	}
body.adventwoche4 section#kalender div[id] a:hover {
	color:#FF301D;
	}
/* E Farbe von Kläppchen-Links nach body-class adventwoche(Nr) +!20251202_2252 TNO */
/* Kläppchen-Links Standard 1. Advent-Woche (01. – 06.12.2025) */
body section#kalender div[id*="01"] a:hover {
	background-image:url("hggra/hg01.jpg")
	}

body section#kalender div[id*="02"] a:hover {
	background-image:url("hggra/hg02.jpg")
	}

body section#kalender div[id*="03"] a:hover {
	background-image:url("hggra/hg03.jpg")
	}

body section#kalender div[id*="04"] a:hover {
	background-image:url("hggra/hg04.jpg")
	}
body section#kalender div[id*="05"] a:hover {
	background-image:url("hggra/hg05.jpg")
	}

body section#kalender div[id*="06"] a:hover {
	background-image:url("hggra/hg06.jpg")
	}
/* Kläppchen-Links Standard 2. Advent-Woche (07. – 13.12.2025) */
body section#kalender div[id*="07"] a:hover {
	background-image:url("hggra/hg07.jpg")
	}

body section#kalender div[id*="08"] a:hover {
	background-image:url("hggra/hg08.jpg")
	}

body section#kalender div[id*="09"] a:hover {
	background-image:url("hggra/hg09.jpg")
	}

body section#kalender div[id*="10"] a:hover {
	background-image:url("hggra/hg10.jpg")
	}

body section#kalender div[id*="11"] a:hover {
	background-image:url("hggra/hg11.jpg")
	}

body section#kalender div[id*="12"] a:hover {
	background-image:url("hggra/hg12.jpg")
	}

body section#kalender div[id*="13"] a:hover {
	background-image:url("hggra/hg13.jpg")
	}

/* Kläppchen-Links Standard 3. Advent-Woche (14. – 20.12.2025) */
body section#kalender div[id*="14"] a:hover {
	background-image:url("hggra/hg14.jpg")
	}

body section#kalender div[id*="15"] a:hover {
	background-image:url("hggra/hg15.jpg")
	}

body section#kalender div[id*="16"] a:hover {
	background-image:url("hggra/hg16.jpg")
	}

body section#kalender div[id*="17"] a:hover {
	background-image:url("hggra/hg17.jpg")
	}

body section#kalender div[id*="18"] a:hover {
	background-image:url("hggra/hg18.jpg")
	}

body section#kalender div[id*="19"] a:hover {
	background-image:url("hggra/hg19.jpg")
	}
body section#kalender div[id*="20"] a:hover {
	background-image:url("hggra/hg20.jpg")
	}

/* Kläppchen-Links Standard 4. Advent-Woche (21. – 24.12.2025) */
body section#kalender div[id*="21"] a:hover {
	background-image:url("hggra/hg21.jpg")
	}

body section#kalender div[id*="22"] a:hover {
	color:#FF301D;
	background-image:url("hggra/hg22.jpg")
	}

body section#kalender div[id*="23"] a:hover {
	color:#FF301D; 
	background-image:url("hggra/hg23.jpg")
	}

body section#kalender div[id*="24"] a:hover {
	color:#FF301D; 
	background-image:url("hggra/hg24.jpg")
	}

body section#überflieger {
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:600px;
	background-color:#000;
	color:#EFEFEF;
	}

body section#überflieger a {
position: absolute;
top:2px;
right:2px;
display:block;
width:32px;
height:32px;
font-size: 26px;
text-decoration:none;
text-align: center;
vertical-align: middle;
border:solid 2px #F00;
color:#F00;
background-color:#FFF;
}

body section#überflieger a[target] {
position: relative;
top:0;
left:0;
display: inline;
width:auto;
height: auto;
font-size: 12px;
color:#FFF;
background-color: transparent;
text-decoration: underline;
border:none;
}

body section#überflieger audio {
margin:20px 120px 20px 120px;
}

body section#überflieger figure {
margin:20px 120px 20px 120px;
max-height: 50%;
max-height: 80%;
}

body section#überflieger figure img {
	max-height: 320px;
	width: auto;
	}

body section#überflieger p {
	margin:20px 120px 20px 120px;
	}

.quelle {
	font-size:86%;
	color:#EEE;
	}
/* Schmales Smartphone (320–579) */
@media screen and (min-width: 320px) AND (max-width: 579px) {
	body  {
		background-color:#FFF;
		}
/* A Desiderat: Prüfen */
body footer {
width:300px;
margin: auto;
}

body header {
width:300px;
height: auto;
margin: auto;
}

/* E Desiderat: Prüfen */
	body section#kalender {
		width:300px;
		height:300px;
/* ersetzt durch Eintrag in ../mods/mod_felder.php
		background-image: url("gra/Advent-Sonntag1_quadrat.jpg");
*/
		background-repeat: no-repeat;
		background-size: cover;
/* background-image:none; */

border:solid thin #BBB;
margin:auto;
	}
/* Kläppchen Standard Smartphone schmal */
	body section#kalender div[id] {
		width:46px;
		height:30px;

		text-align:center;
		vertical-align:middle;
		font-size:20px;

		border:solid thin #000;
		background-color: transparent;
		}
/* 2. Woche Smartphone schmal */
body section#kalender div#kläppchen06,
body section#kalender div#kläppchen07,
body section#kalender div#kläppchen08,
body section#kalender div#kläppchen09,
body section#kalender div#kläppchen10,
body section#kalender div#kläppchen11,
body section#kalender div#kläppchen12
 {
	border-color:#FFFACD;
	color:#FFFACD;
	}
/* 3. Woche Smartphone schmal */
body section#kalender div#kläppchen13,
body section#kalender div#kläppchen14,
body section#kalender div#kläppchen15,
body section#kalender div#kläppchen16,
body section#kalender div#kläppchen17,
body section#kalender div#kläppchen18,
body section#kalender div#kläppchen19
 {
	border-color:#FFB6C1;
	color:#FFB6C1;
	}
/* 4. Woche Smartphone schmal */
body section#kalender div#kläppchen20,
body section#kalender div#kläppchen21,
body section#kalender div#kläppchen22,
body section#kalender div#kläppchen23 {
	border-color:#FF6347;
	color:#FF6347;
	}

	body section#überflieger audio {
		margin:20px 20px 20px 20px;
		}

	body section#überflieger figure {
		margin:20px 20px 20px 20px;
		max-height: 50%;
		}

	body section#überflieger figure img {
		max-height: 300px;
		width: auto;
		max-width: 200px;
		}

	body section#überflieger p {
		margin:20px 20px 20px 20px;
		}
	}
/* Tablet (580–820) */
@media screen and (min-width: 580px) AND (max-width: 820px) {
	body  {
		background-color:#FFF;
		}

	body footer {
width:500px;
margin: auto;
}

body header {
width:500px;
margin: auto;
}

	body section#kalender {
		width:500px;
		height:500px;
/* Ersetzt durch Eintrag in ../mods/mod_felder.php
		background-image: url("gra/Advent-Sonntag1_quadrat.jpg");
*/
		background-repeat: no-repeat;
		background-size: cover;
/* background-image:none; */

border:solid thin #BBB;
margin: auto;
	}

	body section#kalender div[id] {
		width:50px;
		height:50px;

		text-align:center;
		vertical-align:middle;
		font-size:25px;

		border:solid thin #000;
		background-color: transparent;
		}
body section#kalender div#kläppchen06,
body section#kalender div#kläppchen07,
body section#kalender div#kläppchen08,
body section#kalender div#kläppchen09,
body section#kalender div#kläppchen10,
body section#kalender div#kläppchen11,
body section#kalender div#kläppchen12
 {
	border-color:#FFFACD;
	color:#FFFACD;
	}

body section#kalender div#kläppchen13,
body section#kalender div#kläppchen14,
body section#kalender div#kläppchen15,
body section#kalender div#kläppchen16,
body section#kalender div#kläppchen17,
body section#kalender div#kläppchen18,
body section#kalender div#kläppchen19
 {
	border-color:#FFB6C1;
	color:#FFB6C1;
	}
body section#kalender div#kläppchen20,
body section#kalender div#kläppchen21,
body section#kalender div#kläppchen22,
body section#kalender div#kläppchen23 {
	border-color:#FF6347;
	color:#FF6347;
	}

/* A!20251202_2300 TNO: Farbe von Kläppchen-Links (Tablet) nach body-class adventwoche(Nr) */
body.adventwoche1 section#kalender div[id] a:hover {
	color:#FFF;
	}
body.adventwoche2 section#kalender div[id] a:hover {
	color:#E4FF35;
	}
body.adventwoche3 section#kalender div[id] a:hover {
	color:#DC698A; /* Vorgabe PC */
	color:#F1C7D2; /* +!20251202_2303 TNO */
	}
body.adventwoche4 section#kalender div[id] a:hover {
	color:#FF301D;
	}
/* E!20251202_2300 TNO: Farbe von Kläppchen-Links (Tablet) nach body-class adventwoche(Nr) */

/* Kläppchen-Links Tablet der 1. Adventwoche (01. – 06.12.2025) */
body section#kalender div[id*="01"] a:hover {
	background-image:url("hggra/hg01q.jpg")
	}

body section#kalender div[id*="02"] a:hover {
	background-image:url("hggra/hg02q.jpg")
	}

body section#kalender div[id*="03"] a:hover {
	background-image:url("hggra/hg03q.jpg")
	}

body section#kalender div[id*="04"] a:hover {
	background-image:url("hggra/hg04q.jpg")
	}

body section#kalender div[id*="05"] a:hover {
	background-image:url("hggra/hg05q.jpg")
	}
body section#kalender div[id*="06"] a:hover {
	background-image:url("hggra/hg06.jpg")
	}

/* Kläppchen-Links der 2. Adventwoche (07. – 13.12.2025) */
body section#kalender div[id*="07"] a:hover {
	background-image:url("hggra/hg07.jpg")
	}

body section#kalender div[id*="08"] a:hover {
	background-image:url("hggra/hg08q.jpg")
	}

body section#kalender div[id*="09"] a:hover {
	background-image:url("hggra/hg09q.jpg")
	}

body section#kalender div[id*="10"] a:hover {
	background-image:url("hggra/hg10q.jpg")
	}

body section#kalender div[id*="11"] a:hover {
	background-image:url("hggra/hg11q.jpg")
	}

body section#kalender div[id*="12"] a:hover {
	background-image:url("hggra/hg12q.jpg")
	}

body section#kalender div[id*="13"] a:hover {
	background-image:url("hggra/hg13q.jpg")
	}

/* Kläppchen-Links Tablet der 3. Adventwoche (14. – 20.12.2025) */
body section#kalender div[id*="14"] a:hover {
	background-image:url("hggra/hg14q.jpg")
	}

body section#kalender div[id*="15"] a:hover {
	background-image:url("hggra/hg15q.jpg")
	}

body section#kalender div[id*="16"] a:hover {
	background-image:url("hggra/hg16q.jpg")
	}

body section#kalender div[id*="17"] a:hover {
	background-image:url("hggra/hg17q.jpg")
	}

body section#kalender div[id*="18"] a:hover {
	background-image:url("hggra/hg18q.jpg")
	}

body section#kalender div[id*="19"] a:hover {
	background-image:url("hggra/hg19q.jpg")
	}

body section#kalender div[id*="20"] a:hover {
	background-image:url("hggra/hg20q.jpg")
	}
/* Kläppchen-Links Tablet der 4. Adventwoche (21. – 24.12.2025) */
body section#kalender div[id*="21"] a:hover {
	background-image:url("hggra/hg21q.jpg")
	}

body section#kalender div[id*="22"] a:hover {
	background-image:url("hggra/hg22q.jpg")
	}

body section#kalender div[id*="23"] a:hover {
	background-image:url("hggra/hg23q.jpg")
	}

body section#kalender div[id*="24"] a:hover {
	background-image:url("hggra/hg24q.jpg")
	}
/* E Kläppchen-Links Tablet der 4. Adventwoche 2025 */
body section#überflieger audio {
	margin:20px 20px 20px 20px;
	}

body section#überflieger figure {
	margin:20px 20px 20px 20px;
	max-height: 50%;
max-height: 80%;
	}
/*
figcaption
*/

	body section#überflieger figure img {
		max-height: 300px;
		width: auto;
		max-width: 320px;
		}

	body section#überflieger p {
		margin:20px 20px 20px 20px;
		}
/*
body section#kalender {
display: none;
}
*/
	}