/* =====================================================
   content.css
   ===================================================== */

div#content_div {
    overflow-y: auto;   /* statt scroll */
    overflow-x: hidden; /* optional als Schutz */
    min-height: 0;
    min-width: 0;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
    scroll-behavior: smooth;	
    border-radius: 8px;
}

@media (max-width: 768px) {


    div#content_div {
        overflow: visible;     /* KEIN innerer Scroll */
        padding-left: 15px;    /* mobilefreundlich */
        padding-right: 15px;
        padding-top: 10px;
        padding-bottom: 20px;
        border-radius: 0;      /* optional, wirkt ruhiger */
    }
}

div#content_div {

  background-color:var(--content_bg_color);
}

div#img_div {
	max-width:var(--content_image_max_width);
    margin: 10px auto 20px auto;	
}

@media (max-width: 1024px) {
    div#img_div {
		max-width:var(--content_image_max_width_1024);
    }
}

@media (max-width: 768px) {
    div#img_div {
		max-width:var(--content_image_max_width_768);
    }
}


div#txt_div {
    min-height: 0;
}

img#content_img {

    display: block;
    margin: 0 auto; /*zentriert */  
    margin-top:10px;  
    border-radius:8px;
    width:100%;
}


article.article_cls {
    border: 3px solid transparent;
    border-radius: 8px;

    padding: 10px 10px 10px 10px;

    transition:
        background-color 0.4s ease,
        border-color 0.4s ease;
}

article.article_cls h2{
    text-align:center;
}


article.article_active {
    background-color: rgba(180, 210, 240, 0.18);

    border-left-color: rgba(255, 160, 0, 0.7);
    border-right-color: rgba(255, 160, 0, 0.7);
}

article.article_flash {
    animation: articleFlash 2s ease-out forwards;
}


#msg_box_div{
  margin: 150px auto;        /* horizontal zentriert */
  padding: 20px 20px;
  max-width: 600px;
  border-radius: 6px;
  text-align: center;
  background-color:var(--bdy_bg_color);
  border: 3px solid var(--color_kontrast);  
}

#article_toc_ul {
    list-style: none;
    padding-left: 1.2em;

}

#article_toc_ul li {
    position: relative;
    padding-left: 1.2em;
    margin: 0.4em 0;
}

#article_toc_ul li::before {
    content: '◦';
    position: absolute;
    left: 0;
    color: var(--bdy_color_kontrast);
    font-size: 1.1em;
    line-height: 1.2;
}
/* =====================================================
   ANIMATION
===================================================== */

@keyframes articleFlash {

    0% {
        background-color: rgba(var(--color_grundfarbe), 0);
        border-color:     rgba(var(--color_kontrast), 0.1);
    }

    25% {
        background-color: rgba(var(--color_grundfarbe), 0.15);
        border-color:     rgba(var(--color_kontrast), 0.4);
    }

    60% {
        background-color: rgba(var(--color_grundfarbe), 0.12);
        border-color:     rgba(var(--color_kontrast), 0.6);
    }

    100% {
        background-color: rgba(var(--color_grundfarbe), 0.1);
        border-color:     rgba(var(--color_kontrast), 0.9);
    }
}