@charset "utf-8";
/*CSS-Dokument*/

/* ==========================================================
   ÜBERSCHRIFTEN
========================================================== */
.monat-ueberschrift {
	margin-top: 2rem;
    margin-bottom: 1rem;
}

h2 {
	padding-bottom: 2rem;
}

h1, h2, h3 {
	font-weight: 600;
	text-align: center;
}

/* ==========================================================
   INHALT
========================================================== */
.list-group-item-action:hover {
	background-color: rgba(241, 192, 33, 0.02);
}

.card {
	margin-bottom: 2rem;
}

.hidden {
	visibility: hidden;
}

/* ==========================================================
   MEILENSTEINE
========================================================== */
.meilenstein-trenner:hover::before,
.meilenstein-trenner:hover::after,
.meilenstein-uebersicht:hover::before,
.meilenstein-uebersicht:hover::after {
    border-color: #d99d00;
}

/* Trenner */
.meilenstein-trenner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 2.5rem;
}

.meilenstein-trenner::before,
.meilenstein-trenner::after {
    content: "";
    flex: 1;
    border-top: 2px solid #f1c021;
}

.meilenstein-trenner,
.meilenstein-trenner:hover,
.meilenstein-trenner:visited,
.meilenstein-trenner:active {
    text-decoration: none;
}

.meilenstein-trenner span {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.4rem;
    margin: 0 20px;
    transition: transform .2s ease;
}

.meilenstein-trenner:hover span {
    transform: scale(1.15);
}

/* Übersicht */
.meilenstein-uebersicht {
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 1.4rem 0;
    text-decoration:none;
}

.meilenstein-uebersicht::before,
.meilenstein-uebersicht::after {
    content:"";
    flex:1;
    border-top:1.5px solid #f1c021;
}

.meilenstein-uebersicht span {
    font-size:1.4rem;
    margin:0 20px;
    line-height:1;
    transition:transform .2s;
}

.meilenstein-uebersicht:hover span {
    animation: heartbeat .6s ease;
}

.meilenstein-uebersicht small {
    margin-top: .55rem;
    font-size: .85rem;
    color: #666;
    opacity: 0;
    transition: opacity .25s ease;
}

.meilenstein-uebersicht:hover small {
    opacity: 1;
}

/* Inhalt */
.meilenstein-inhalt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.meilenstein-inhalt small {
    position: absolute;
    top: 100%;
    margin-top: .35rem;
    opacity: 0;
    transition: opacity .25s ease;
    white-space: nowrap;
}

/* Herzschlag */
@keyframes heartbeat {
    0%,100% { transform: scale(1); }
    40%     { transform: scale(1.15); }
    60%     { transform: scale(1.08); }
}

/* ==========================================================
   DANK-BOX
========================================================== */
.dank-box {
    border: 2px solid #f1c021;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    background: rgba(255,255,255,.75);
}

.dank-box p {
    margin-bottom: 0;
}

.dank-box a{
	text-decoration: none;
}

.dank-box a:hover {
	color: #f1c021;
}

/* ==========================================================
   VEREINSAUTO
========================================================== */
.vereinsauto {
    display: block;
    margin: 0 auto 1.5rem;
    border-radius: .5rem;
}

.bildunterschrift {
	font-size: 0.95rem;
    font-weight: 600;
    margin-top: .6rem;
}

/* ==========================================================
   Bericht mit Bild
========================================================== */
.bericht-text {
	padding: 2rem;
}

.bericht-kunst {
    width: 85%;
    display: block;
    margin: 2rem auto;
}

.bericht-bild {
    max-width: 500px;
    margin: 2rem auto;
}

.bericht-bild img {
    display: block;
    width: 100%;
    height: auto;
}

.bericht-bild figcaption {
    margin-top: .75rem;
    font-size: 0.9rem;
    font-style: italic;
    color: #666;
}

/* ==========================================================
   Listen
========================================================== */
.beobachtungen {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.beobachtungen li {
    margin-bottom: .5rem;
}