*{
	box-sizing: border-box;
}

:root{
	--header-farbe-hell: #ffffff70;
	--header-farbe-dunkel: #1d5151;
	--tisch-farbe: #FFFAF9;
	--papier-farbe-hell: white;
	--papier-farbe-dunkel: #a5d0db;
	--footer-farbe: rgb(2, 3, 88);
	--schriftgroesse-gross: 1.4em;
	--schriftgroesse-ueberschrift:  1.2em;
	--schriftgroesse-mittel: 1em;
	--schriftgroesse-klein: 0.8em;
	--schriftfarbe-dunkel: black;
	--schriftfarbe-hell: white;
    --schriftfarbe-rot: rgb(2, 3, 88);
	--button-farbe-hell: #1d5151;
	--button-farbe-dunkel:  #37281F;
}

body {
	background-color: var(--tisch-farbe);
	background-image: url(tisch-farbe.png);
	margin: 0;
	font-family: "Times New Roman";
}


a {text-decoration: none;}

a:not([class]), a:not([class]):visited, a:not([class]):active{color: #1d5151}

td a {text-decoration: underline;}

.header {
	color: var(--schriftfarbe-rot);
}


.header-oben {
	background-color: var(--header-farbe-hell);
	color: #320;	
	background-image: url(tisch-farbe.png);
	max-height:  22em;
}

.layout-breite {
	max-width: 75em;
	margin: auto;
	width:  100%;
}

.header-oben {
	background-color: var(--header-farbe-hell);
	color: #320;	
	background-image: url(tisch-farbe.png);
	max-height:  22em;
}

.header-unten {
	background-color: var(--footer-farbe);
	padding-bottom:  2em;
	display:  flex;
	justify-content: flex-start;	
}

.header-logo {
	margin-top: 1.5em;
	float:  left;
	display: flex;
	justify-content: space-between;
	text-shadow: 1px 1px 0 #fff5;
	color: #320;
}

.header-innen {
	padding:  0.5em;
	display:  flex;
	justify-content: space-between;
	background-image: url(schneemann_weihnachtsbaum.svg);
	background-repeat: no-repeat;
	background-position: 90% 100%;
	background-size: 18%;
}

.header-logo-adventskalender {
	width:  3.6em;
	margin-bottom:  2.5em;
	margin-left: 0.5em;
	margin-right: 1.7em;
}

.dunkle-section-dreieck-oben {
	background-color: var(--papier-farbe-dunkel);
	height:  6em;
	clip-path: polygon(100% 0%, 100% 100%, 0% 100%);;
}

.dunkle-section-dreieck-unten {
	background-color: var(--papier-farbe-dunkel);
	height:  6em;
	clip-path: polygon(0% 0%, 100% 100%, 100% 0%);;
}


.papierschatten-dunkle-section{
	background-color: var(--papier-farbe-dunkel);
}

.papierabschnitt {
    background-color: var(--papier-farbe-dunkel);
    color:  var(--schriftfarbe-hell);
    font-size: var(--schriftgroesse-mittel);
	padding:  2em;
	margin-left:  3em;
	margin-right:  3em;
}

.papierabschnitt-2 {
    background-color: var(--papier-farbe-dunkel);
    color:  var(--schriftfarbe-hell);
    font-size: var(--schriftgroesse-mittel);
	padding:  2em;
	margin-left:  3em;
	margin-right:  3em;
}

.papierabschnitt-3 {
    background-color: var(--papier-farbe-dunkel);
    color:  var(--schriftfarbe-hell);
    font-size: var(--schriftgroesse-mittel);
	padding:  2em;
	margin-left:  3em;
	margin-right:  3em;
    height: 120em;
}

.papierabschnitt-location {
	display:  flex;
	flex-direction: column;
}

.papierabschnitt-dunkle-section-nebeneinander {
	display:  flex;
	flex-direction: row;
}

.papierabschnitt-klein-buttons {
	display: flex;
	align-items: flex-start;
	gap: 2em;
}

.impressum-bild {
    width: 100%;
    border: 1em solid var(--papier-farbe-hell);
}

.action-button {
	background-color: var(--button-farbe-dunkel);
	padding-left: 1.5em;
	padding-right: 1.5em;
	padding-bottom: 0.6em;
	padding-top: 0.6em;
	color:  var(--schriftfarbe-hell);
	text-decoration: none;
	box-shadow: 0 0 5px #0006;
}

.bubbles {
	display: flex;
    justify-content:right;
	grid-row: 3;
	width:  30em;
    margin-left: 40%;
    margin-top: 10%;

}

.bubbles-2 {
	display:flex;
    justify-content:center;
	grid-row: 3;
	width:  40em;
    margin-left: 15%;
    margin-top: 10%;

}


.big-bubble{
	width: 30em;
	height: 30em;
	object-fit: cover;
	border-radius: 100%;
	grid-column: 1/ span 3;
	grid-row: 1/ span 3;
	box-shadow: 0 0 5px #0003;
}

.small-bubble {
	width: 10em;
	height: 10em;
	object-fit: cover;
	border-radius: 100%;
	grid-column: 3;
	grid-row: 3;
	box-shadow: 0 0 5px #0003;
}

.big-bubble-2{
	width: 30em;
	height: 30em;
	object-fit: cover;
	border-radius: 100%;
	grid-column: 1/ span 3;
	grid-row: 1/ span 3;
	box-shadow: 0 0 5px #0003;
}

.big-bubble-3{
	width: 30em;
	height: 30em;
	background: #ffffff70;
	object-fit:cover;
	border-radius: 100%;
	grid-column: 1/ span 3;
	grid-row: 1/ span 3;
	box-shadow: 0 0 5px #0003;
	border: 0.1em solid var(--papier-farbe-hell);
}

.small-bubble-2 {
	width: 10em;
	height: 10em;
	object-fit: cover;
	border-radius: 100%;
	grid-column: 3;
	grid-row: 3;
	box-shadow: 0 0 5px #0003;
	background: #ffffff70;
}

.foto-groß {
	position: fixed;
	inset: 0;
	background-color: #000a;
	display: grid;
	justify-content: center;
	align-content: center;
	z-index: 11;
	display: none;
}

.foto-rahmen {
	border: 1em solid var(--papier-farbe-hell);
	max-width: 80em;
	max-height: 50em;
}

.foto-groß:target {
	display: grid;
}

.footer {
	background-color: var(--footer-farbe);
	padding-top: 2em;
	padding-bottom: 3em;

}

.footer-innen {	
	display: flex;
	justify-content: space-between;
	padding: 2em 3em 2em 3em;
}

.footerliste-menupunkte {
	font-size: var(--schriftgroesse-gross);
	padding-top: 2em;
}

.footerliste-href {
	color:  var(--schriftfarbe-hell);
}

.footerliste-href {
	color:  var(--schriftfarbe-hell);
}

.footerliste {
	list-style-type: none;
	font-size: var(--schriftgroesse-gross);
	column-count: 3;
	width: 30em;
	padding:  0em;
	margin:  0em;
	line-height: 2;}

.footer-logos {
	display: flex;
	flex-direction:row;
	gap: 2em;
	align-items: start;
}

/* Kalender zurücksetzen im Footer */
.footer-reset {
	flex-wrap: wrap;
	text-align: left;
    margin-top: 20px;
	margin-left: 5%;
    font-size: 11px;
}

.alt-pug-2023 {
	text-align: justify;
	text-align-last: justify;
	font-family: "Lucida Handwriting";
    color:  var(--schriftfarbe-rot);
}

.alt-pug-2023-1{
    width: 100%;
    margin-left: 20%;
    margin-top: 3%;
	font-size: 2.6em;
	line-height: 0.9;
	font-weight: 600;
}

.alt-pug-2023-2{
	font-size: var(--schriftgroesse-mittel);
	line-height: 1.5em;
}

.alt-pug-2023-3{
	font-size: var(--schriftgroesse-mittel);
}

#kalender-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 3%;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.kalender-tuer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.kalender-tuer img {
  width: 100%;
  transition: opacity 0.2s;
  border: 0.5em solid var(--papier-farbe-hell);
  border-radius: 18px;
}

.tuerBild {
    height: 15em;
    border: 1em solid var(--papier-farbe-hell);
    display: flex;
    margin-left: 40%;
}

.alle_schneeflocken {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		position: fixed;
		overflow: hidden;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;
	}

	.schneeflocken {
		height: 1vh;
		width: 1vh;
		border-radius: 50%;
		background-color: rgb(231, 223, 223); 
		animation-name: schneeflocke;
		animation-duration: 10s;
		animation-iteration-count: infinite;
		animation-fill-mode: both;
		animation-direction: normal;
		animation-timing-function: linear;
		flex-shrink: 0;
    }

    @keyframes schneeflocke {
		0% {
 			transform: translate(0, -10vh) rotate(0deg)
		}

		100% {
			transform: translate(0, 110vh) rotate(360deg)
		}
	}

			.delay {
				animation-delay: 1s;				
			}

			.delay2 {
				animation-delay: 2s;
			}

			.delay3 {
				animation-delay: 5s;				
			}

			.delay4 {
				animation-delay: 3s;				
			}

			.delay5 {
				animation-delay: 4s;				
			}

			.delay6 {
				animation-delay: 0s;				
			}

			.delay7 {
				animation-delay: 9s;				
			}

			.delay8 {
				animation-delay: 8s;				
			}

			.delay9 {
				animation-delay: 6s;				
			}

			.delay10 {
				animation-delay: 10s;				
			}

			.delay11 {
				animation-delay: 7s;				
			}

			.delay12 {
				animation-delay: 9s;				
			}

			.delay13 {
				animation-delay: 1s;				
			}

			.delay14 {
				animation-delay: 2s;				
			}

			.delay15 {
				animation-delay: 5s;				
			}

			.delay16 {
				animation-delay: 3s;				
			}

			.delay17 {
				animation-delay: 4s;				
			}

			.delay18 {
				animation-delay: 9s;				
			}

			.delay19 {
				animation-delay: 8s;				
			}

			.delay20 {
				animation-delay: 6s;				
			}

			.delay21 {
				animation-delay: 10s;				
			}

			.delay22 {
				animation-delay: 7s;				
			}

			.delay23 {
				animation-delay: 4s;				
			}

			.delay24 {
				animation-delay: 0s;				
			}

			.delay25 {
				animation-delay: 1s;				
			}

			.delay26 {
				animation-delay: 2s;				
			}

			.delay27 {
				animation-delay: 5s;				
			}

			.delay28 {
				animation-delay: 3s;				
			}

			.delay29 {
				animation-delay: 9s;				
			}

			.delay30 {
				animation-delay: 8s;				
			}

			.delay31 {
				animation-delay: 6s;				
			}

			.delay32 {
				animation-delay: 10s;				
			}

			.delay33 {
				animation-delay: 7s;				
			}

			.delay34 {
				animation-delay: 3s;				
			}

			.delay35 {
				animation-delay: 4s;				
			}

			.delay36 {
				animation-delay: 0s;				
			}

			.delay37 {
				animation-delay: 1s;				
			}

			.delay38 {
				animation-delay: 2s;				
			}

			.delay39 {
				animation-delay: 5s;				
			}

			.delay40 {
				animation-delay: 9s;				
			}

			.delay41 {
				animation-delay: 8s;				
			}

			.delay42 {
				animation-delay: 6s;
			}

			.delay43 {
				animation-delay: 10s;				
			}

			.delay44 {
				animation-delay: 7s;				
			}

			.delay45 {
				animation-delay: 4s;				
			}

			.delay46 {
				animation-delay: 0s;				
			}

			.delay47 {
				animation-delay: 1s;				
			}

			.delay48 {
				animation-delay: 2s;				
			}

			.delay49 {
				animation-delay: 5s;				
			}

			.delay50 {
				animation-delay: 3s;				
			}

			.delay11 {
				animation-delay: 9s;				
			}

			.delay52 {
				animation-delay: 8s;				
			}

			.delay53 {
				animation-delay: 6s;				
			}

			.delay54 {
				animation-delay: 10s;				
			}

			.delay55 {
				animation-delay: 7s;				
			}

			.delay56 {
				animation-delay: 3s;				
			}

			.delay57 {
				animation-delay: 4s;				
			}

			.delay58 {
				animation-delay: 0s;				
			}

			.delay59 {
				animation-delay: 1s;				
			}

			.delay60 {
				animation-delay: 2s;				
			}

			.delay61 {
				animation-delay: 5s;				
			}

			.delay62 {
				animation-delay: 9s;				
			}

			.delay63 {
				animation-delay: 8s;				
			}

			.delay64 {
				animation-delay: 6s;				
			}

			.delay65 {
				animation-delay: 10s;				
			}

			.delay66 {
				animation-delay: 7s;				
			}

			.delay67 {
				animation-delay: 5s;				
			}

			.delay68 {
				animation-delay: 3s;				
			}

			.delay69 {
				animation-delay: 4s;				
			}

			.delay70 {
				animation-delay: 0s;
			}