/* design.css */  

    body {
        font-family: 'Open Sans', sans-serif;
        color:#4b4949;
        background-color: #fff;         
    }
 
    h1 {
        font-family: 'Open Sans', sans-serif;
        font-size: 2em;
        color: #3333CC;
        font-weight:400;
        text-decoration:none;
    }

    h1 a:hover {
        color:#3333CC;
    }

    h2 {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.6em;
        color: #3333CC;
        font-weight:normal;
    }

    h3 {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.3em;
        color: #3333CC;
        font-weight:500;        
    }

    h4 {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.2em;
        color: #3333CC;
        font-weight:normal;
    }

    h5 {
        font-family: 'Open Sans', sans-serif;
        font-size: 0.9em;
        color: #3333CC;
        font-weight:normal;
        line-height:0.9em;
    }

    h6 {
        font-family: 'Open Sans', sans-serif;
        font-size: 0.7em;
        color: #939393;
        font-weight:normal;
        line-height:1.2em;
    }    

    p {
        font-size: 1.2em;
        color:#848484;
        font-weight:400;
    }

    .border1 {
        border-bottom:1px solid #a3a3a3;
        margin:50px;
    }

    .sticky {
        position: -webkit-sticky; /* Für Safari */
        position: sticky;
        top: 0; /* Abstand vom oberen Rand */
    }

    .font-small {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.0em;
        color: #3333CC;
        font-weight:400; 
    }

    .font-rel {
        font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    }

    .font-rel2 {
        font-size: clamp(0.8rem, 1.5vw, 1rem);
    }
    
    html, body {
        font: 100% 'Open Sans', sans-serif;
    }    

    #logo-klein {
        background: url("weltkugel-klein.jpg") top center no-repeat;        
    }

    #logo-sehr-klein {
        background: url("weltkugel-sehr-klein.jpg") top left no-repeat;
    }

    #logo-klein-pf {
        background: url("images/logo_pfarrei_2.jpg") top center no-repeat;        
    }

    #logo-sehr-klein-pf {
        background: url("images/logo_pfarrei_2.jpg") top left no-repeat;
    }

    #logo-js {
        background: url("images/js.jpg") top center no-repeat;        
    }    
   
    #footer-menu {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.0em;
        color: white;
        text-decoration: none;
        text-align: center;
        background-color: #A4A4A4;
        min-height: 30px;
        padding:0px;
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: -20px;
        border-bottom: 1px solid #F2F2F2;
        vertical-align: middle;
        word-spacing: 2.2em;
        height:auto;        
    }

    #header-menu-2 {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.0em;
        color: darkblue;
        text-decoration: none;
        font-weight: bold;
        text-align: right;
        min-height: 30px;
        padding:0px;
        margin-left: -20px;
        margin-right: -20px;
        vertical-align: right;
        word-spacing: 2.2em;
        height:auto;        
    }

    .button2 {
        background-color: #BDBDBD;
        border: 1px solid white;
        box-shadow: 0px 3px 8px #A9A9A9;
        border-radius: 5px;
        color: white;
        padding: 2px 24px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 15px;
        margin: 0px 2px;
        cursor: pointer;
    } 
    
    .button3 {
        background-color: #efeded;
        width:15rem;
        height:auto;
        border: 1px solid rgb(207, 205, 205);
        box-shadow: 0px 2px 6px #7f7e7e;
        border-radius: 4px;
        color: white;
        padding: 0px 0px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 15px;
        margin: 15px 15px;
        cursor: pointer;
    } 

    .button3:hover {
        /*box-shadow: 0 8px 10px 0 rgba(0,0,0,0.24),0 10px 30px 0 rgba(0,0,0,0.19);*/
        box-shadow: 0 10px 14px 0 rgba(0,0,0,0.30),0 14px 40px 0 rgba(0,0,0,0.25);
    }

    .button4 {
        background-color: #136f40; /* Hintergrundfarbe des Buttons */
        border: none; /* Keine Rahmenlinie um den Button */
        color: white; /* Schriftfarbe */
        padding: 5px 32px; /* Innenabstand */
        text-align: center; /* Ausrichtung des Textes */
        text-decoration: none; /* Keine Unterstreichung des Textes */
        display: inline-block; /* Anzeige als Inline-Block */
        font-size: 16px; /* Schriftgröße */
        margin: 4px 2px; /* Abstand zu anderen Elementen */
        cursor: pointer; /* Mauszeiger verwandelt sich in Hand-Zeiger, wenn man über den Button fährt */
        border-radius: 10px; /* Rundungen an den Ecken des Buttons */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Schatten */
        }
    
    .button4:hover {             
        background-color: #8d8989; /* Neue Farbe */
        }

    .button5 {
        background-color: #666666; /* Hintergrundfarbe des Buttons */
        border: none; /* Keine Rahmenlinie um den Button */
        color: white; /* Schriftfarbe */
        padding: 5px 32px; /* Innenabstand */
        text-align: center; /* Ausrichtung des Textes */
        text-decoration: none; /* Keine Unterstreichung des Textes */
        display: inline-block; /* Anzeige als Inline-Block */
        font-size: 16px; /* Schriftgröße */
        font-weight: 300; /* Dicke der Schrift */
        margin: 4px 2px; /* Abstand zu anderen Elementen */
        cursor: pointer; /* Mauszeiger verwandelt sich in Hand-Zeiger, wenn man über den Button fährt */
        border-radius: 10px; /* Rundungen an den Ecken des Buttons */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Schatten */
        }
    
    .button5:hover {             
        background-color: #8d8989; /* Neue Farbe */
        }

    .button6 {
        background-color: #c06a0f; /* Hintergrundfarbe des Buttons */
        border: none; /* Keine Rahmenlinie um den Button */
        color: white; /* Schriftfarbe */
        padding: 5px 32px; /* Innenabstand */
        text-align: center; /* Ausrichtung des Textes */
        text-decoration: none; /* Keine Unterstreichung des Textes */
        display: inline-block; /* Anzeige als Inline-Block */
        font-size: 16px; /* Schriftgröße */
        font-weight: 300; /* Dicke der Schrift */        
        margin: 4px 2px; /* Abstand zu anderen Elementen */
        cursor: pointer; /* Mauszeiger verwandelt sich in Hand-Zeiger, wenn man über den Button fährt */
        border-radius: 10px; /* Rundungen an den Ecken des Buttons */
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* Schatten */
        }
    
    .button6:hover {             
        background-color: #8d8989; /* Neue Farbe */
        }

    .button7 {
        color: red; /* Schriftfarbe */
        cursor: pointer; /* Mauszeiger verwandelt sich in Hand-Zeiger, wenn man über den Button fährt */        
       }
    
    .button7:hover {             
        background-color: #8d8989; /* Neue Farbe */
        }

    .button8 {
        background-color: #F2F2F2; /* Hintergrundfarbe des Buttons */
        border: 1px solid #585858; /* Rahmenlinie um den Button */
        color: #585858; /* Schriftfarbe */
        padding: 10px 32px; /* Innenabstand */
        text-align: center; /* Ausrichtung des Textes */
        text-decoration: none; /* Keine Unterstreichung des Textes */
        display: inline-block; /* Anzeige als Inline-Block */
        font-size: 16px; /* Schriftgröße */
        font-weight: 500; /* Dicke der Schrift */
        margin: 4px 2px; /* Abstand zu anderen Elementen */
        cursor: pointer; /* Mauszeiger verwandelt sich in Hand-Zeiger, wenn man über den Button fährt */
        border-radius: 3px; /* Rundungen an den Ecken des Buttons */
        /*box-shadow: 0 1px 2px 0 rgba(44, 44, 44, 0.2), 0 2px 8px 0 rgba(31, 30, 30, 0.19);  Schatten */
    }
        
    .button8:hover {             
        background-color: #8d8989; /* Neue Farbe */
        text-decoration: none; /* Keine Unterstreichung des Textes */
        color:white;
    }

    .button9 {
        background-color: #084B8A; /* Hintergrundfarbe des Buttons */
        border: none; /* Keine Rahmenlinie um den Button */
        color: white; /* Schriftfarbe */
        padding: 5px 12px; /* Innenabstand */
        text-align: center; /* Ausrichtung des Textes */
        text-decoration: none; /* Keine Unterstreichung des Textes */
        display: inline-block; /* Anzeige als Inline-Block */
        font-size: 16px; /* Schriftgröße */
        font-weight: 300; /* Dicke der Schrift */        
        margin: 4px 2px; /* Abstand zu anderen Elementen */
        cursor: pointer; /* Mauszeiger verwandelt sich in Hand-Zeiger, wenn man über den Button fährt */
        /*border-radius: 10px;  Rundungen an den Ecken des Buttons */
        /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);  Schatten */
        }
    
    .button9:hover {             
        background-color: #8d8989; /* Neue Farbe */
        border-radius:10px;
        }

    .selektor {
        box-shadow: 0 0 15px grey;
    }

    .index1 {
        background-color:#A4A4A4;
        font-size:16px;
        color:white;
        border: grey 1px solid;
        padding:3px 10px 3px 10px;              
        margin: 10px;           
        border-radius:10px;
        display: inline-block;
    }

/* Das folgende gehört zum Ausssehen des "dropdown-mega" vom Menüs. */
    a.link1 {
        text-decoration: none;
        color: #024685;
    }

    a.link1:hover {
        text-decoration: underline #024685;
        color: #024685;
    }

    a.link1>ul:hover {
        text-decoration: underline #024685;
        color: #024685;
    }

    a.link1>ul>li:hover {
        text-decoration: underline #024685;
        color: #024685;
    }
/* ********************************************************************* */ 

    a.link2 {
        text-decoration: none;
        color: #04B486;
    }

    a.link2:hover {
        text-decoration: underline #04B486;
        color: #04B486;
    }

    a.link2>ul:hover {
        text-decoration: underline #04B486;
        color: #04B486;
    }

    a.link2>ul>li:hover {
        text-decoration: underline #04B486;
        color: #04B486
    }

/* ********************************************************************* */

    .link3 {
        background-color:#7a7979;
        font-size:15px;
        text-align:center;
        color:white;
        border: rgb(219, 216, 216) 2px solid;
        padding:3px 10px 3px 10px;              
        margin: 10px;           
        border-radius:10px;
        display: inline-block;
    }

    .link4 {
        font-size:15px;
        text-align:center;
        color:#084B8A;
        border: rgb(219, 216, 216) 2px solid;
        padding:3px 10px 3px 10px;              
        margin: 10px;           
        border-radius:10px;
        display: inline-block;
    }

    #suchfeld {
        margin-right: 20px;
        margin-top:50px;                
    }

    #suchergebnisse {
        margin:30px 30px 0px 0px;
        padding:10px 10px 10px 10px;
        min-height:500px;
    }

    #suchergebnisse h1 {
        font-size: 1.2em;
        line-height: 1.6em;
        margin: 1em 0;
        color: #333;
    }

    #suchergebnisse h3 {
        font-size: .9em;
        font-weight:bold;
        line-height: 1.6em;
        margin: 1.4em 0 0 0;
        color:#333;
    }

    #suchergebnisse p {
        font-size: .8em;
        line-height: 1.2em;
        color: #333;
    }

    #suchergebnisse li {
        font-size: .8em;
        line-height: 1.2em;
        margin: .8em 2.5em;
        color: #333;
    }

    #suchergebnisse ol li {
        border-bottom:1px dotted #990000;
        padding-bottom:15px;
    }

    #suchergebnisse ul li {
        list-style-type:square;
    }

    #suchergebnisse em {
        font-weight: bold;
        font-style: normal;
        color:#333;
    }

    #output a {
        font-weight: bold;
    }

    .searchword  {color: #222; background-color: #ffd; border: 1px dotted #ffd;}
    .searchword0 {color: #222; background-color: #ff0; border: 1px dotted #ff0;}
    .searchword1 {color: #222; background-color: #0f0; border: 1px dotted #0f0;}
    .searchword2 {color: #222; background-color: #0ff; border: 1px dotted #0ff;}
    .searchword3 {color: #222; background-color: #fbb; border: 1px dotted #fbb;}
    .searchword4 {color: #222; background-color: #dfd; border: 1px dotted #dfd;}
    .searchword5 {color: #222; background-color: #faf; border: 1px dotted #faf;}
    .searchword6 {color: #222; background-color: #ccc; border: 1px dotted #ccc;}

    .mod {
        display: block;
        font-size: .8em;
        color:#333;
    }

    .mod a:link {
        color: #333;
    }

    .mod a:hover {
        color: #990000;
    }

    #searchfooter {
        font-size: .8em;
        margin-top: 1em;
    }

    input.button {
        border:1px solid #999;
        background-color:#666;
        width:60px;
        padding:1px;
        cursor:pointer;
        color:#FFF;
        font-weight:bold;
    }

    @media only screen and (min-width: 600px){
        .col-s-1 {width: 8.33%}
        .col-s-2 {width: 16.66%}
        .col-s-3 {width: 25%}
        .col-s-4 {width: 33.33%}
        .col-s-5 {width: 41.66%}
        .col-s-6 {width: 50%}
        .col-s-7 {width: 58.33%}
        .col-s-8 {width: 66.66%}
        .col-s-9 {width: 75%}
        .col-s-10 {width: 83.33%}
        .col-s-11 {width: 91.66%}
        .col-s-12 {width: 100%}
    }

    #footer-menu {
        font-family: 'Open Sans', sans-serif;
        font-size: 1.0em;
        color: white;
        text-decoration: none;
        text-align: center;
        background-color: #A4A4A4;
        min-height: 30px; 
        padding:0px;
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 0px;
        border-bottom: 1px solid #F2F2F2;
        vertical-align: middle;
        word-spacing: 2.2em;
        height:auto;        
    }
    
    li.b {
        font-size:1.2em;
        color:#848484;
        font-weight:400;
        list-style-type: none;
    }

    a.two {
        text-decoration: none;
    }

    a.two:link {
        color: #0174DF;
        text-decoration: none;
    }

    a.two:visited {
        color: #088A08;
    }

    a.two:hover {
        color: #8A084B;
        border-bottom: 1px solid #8A084B;
    }

    
/* Die folgenden Tabellendefinitionen wirken sich auf die Gottesdiensttabelle und die Veranstaltungstabelle aus.
   Das Umschalten der Hintergrundfarbe der Zeilen wird auf jeder Seite definiert und nicht hier.  */

   table.tab3, th.tab3, td.tab3, caption.tab3 {
    border: thin solid #A4A4A4;
    }

    table.tab3 {
        border-collapse: collapse;
        border-spacing: 0;
        border-width: thin 0 0 thin;
        margin: 0 20px 1em;
        table-layout: auto;
        max-width: 100%;
        min-width: 280px;    
    }
    th.tab3, td.tab3 {
        font-weight: normal;
        text-align: left;
        padding: 10px;
        font-family: 'Open Sans';
        font-weight: normal;
        font-size: 1em;
        color: #0B2161;
        box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0);
    }
    td.tab3 {
        width:auto;
        max-width: 600px;
    }
    th.tab3, caption.tab3 {
        background-color: #CEE3F6;
        font-weight: 700;
        text-align:center;    
    }
    tbody.tab3 tr.tab3:nth-child(even) td.tab3 { 
        background-color: #e4ebf2; 
        font-family: 'Open Sans';
        font-weight: normal;
        color: #0B2161; 
    }

    /* ******************************************** */

    tr.tabe:nth-child(odd) {
        background-color: #F2F2F2;
    }


    .img-link1 {
        max-width:280px;
        height: auto;
        }

    img.linkdesign1 {
        box-shadow: 3px 3px 15px #A4A4A4;
        border-radius: 7px; 
        border: 1px solid white;
        width: 90%;
        height: auto;    
        margin-bottom:0%;
        margin-right:5%;
        margin-top:5%;
    } 

    img.a {
        box-shadow: 3px 3px 15px #A4A4A4;
        border-radius: 7px; 
        border: 1px solid white;
        width: 90%;
        height: auto;    
        margin-bottom:0%;
        margin-right:5%;
        margin-top:5%;
    }

    img.b {
        box-shadow: 0px 4px 10px silver;
        border-radius: 10px; 
        border: 1px solid white;
        width: 70%;
        height: auto;
        margin-top: 5%;
        margin-bottom:5%;
    }

/* ___________________________________________________________________________________________________ */

/* Die folgende css Einstellung verwende ich auf sehr vielen Seiten. */
    .border_shadow_1 {
        box-shadow: 3px 3px 15px #A4A4A4;
        border-radius: 10px; 
        border: 1px solid white;
        width:90%;
        height: auto;
        margin-top: 0%;
        margin-bottom:5%;
    }

/*  Die folgenden zwei Einstellungen kann ich auf der bestehenden index.php nicht gleichzeitig benutzen.
    Auf der index-feb-2025.php funktioniert das schon. */
    .border_shadow_20 {
        box-shadow: 3px 3px 15px #A4A4A4;
        border-radius: 10px; 
        border: 1px solid red;
        width:90%;
        height: auto;
        margin-top: 0%;
        margin-bottom:5%;
    }

    .border_shadow_21 {        
        border: 1px solid white;
        width:90%;
        height: auto;
        margin-top: 0%;
        margin-bottom:5%;
    }
/* ___________________________________________________________________________________________________ */

    .arrow {
        border: 5px solid #444;
        font-size:0;line-height:0;height:0;padding:0;margin:0;
    }

    .arrow.down {
        border-right-color:  transparent;
        border-bottom-color: transparent;
        border-left-color:   transparent;
    }

    .arrow.up {
        border-top-color:    transparent;
        border-right-color:  transparent;
        border-left-color:   transparent;
    }

    .arrow.left {
        border-top-color:    transparent;
        border-bottom-color: transparent;
        border-left-color:   transparent;
    }

    .arrow.right {
        border-top-color:    transparent;
        border-right-color:  transparent;
        border-bottom-color: transparent;
    }

    .l-no-vertical-scroll {
        overflow-y: hidden;
    }

    .umbruch {
        word-wrap: break-word;
    } 

    a.standard {
        text-decoration: underline #31B404;
        color: #31B404;
        white-space: nowrap;
    }
    a.standard:hover {
        text-decoration: underline #045FB4;
        color: #045FB4;
    }

    a.mail {
        text-decoration: none;
        color: #8A0829;
        white-space: nowrap;
    }
    a.mail:hover {
        text-decoration: underline #DF013A;
        color: #DF013A;
    }

    a.one {
        text-decoration: none;
        color: #045FB4;
    }
    a.one:hover {
        text-decoration: underline #045FB4;
        color: #045FB4;
    }

/* Von "id" nach "class" geändert. */

    .story-wrapper {
        width: auto;
        margin: 0 auto;
        overflow: auto;
    }

    .story-one {
        vertical-align: top;
        max-width : 150px;
        text-align: left;
        display : inline-block;
        padding: 10px;
        hyphens: auto;
    }

    .story-wrapper-a {
        width: auto;
        min-height:400px;
        overflow: auto;
        max-width:1200px; 
        text-align:center;
        margin-left:20px; 
        margin-right:20px;  
    }

    .story-one-a {
        vertical-align: top;
        max-width : 500px;
        text-align: left;
        display : inline-block;
        padding: 0px;
        margin: 0px;
        hyphens: auto;
    }

    .story-two-a {
        vertical-align: top;
        max-width : 500px;
        text-align: left;
        display : inline-block;
        padding: 0px;
        margin: 0px;
        hyphens: auto;
    }

    .story-three-a {
        vertical-align: top;
        width : 50px;
        height:1px;
        text-align: left;
        display : inline-block;
        padding: 0px;
        margin: 0px;
        hyphens: auto;
    }

    .story-wrapper-b {
        width: auto;
        min-height:200px;
        overflow: auto;
        max-width:1200px; 
        text-align:center;
        padding-left:20px;
        padding-right:20px;   
    }

    .story-one-b {
        vertical-align: top;
        max-width : 440px;
        text-align: center;
        display : inline-block;
        padding: 0px;
        margin-left: 10px; 
        hyphens: auto;
    }

   .story-one-b2 {
        vertical-align: top;
        max-width : 590px;
        text-align: center;
        display : inline-block;
        padding: 0px;
        margin-left: 10px; 
        hyphens: auto;
    }

    .story-two-b {
        vertical-align: top;
        max-width : 740px;
        text-align: left;
        display : inline-block;
        padding: 0px;
        margin: 0px;
        hyphens: auto;
    }

    .story-two-b2 {
        vertical-align: top;
        max-width : 590px;
        text-align: left;
        display : inline-block;
        padding: 0px;
        margin: 0px;
        hyphens: auto;
    }

    .story-three-b {
        vertical-align: top;
        width : auto;
        height:auto;
        text-align: left;
        display : inline-block;
        padding: 0px;
        margin: 20px;
        hyphens: auto;
    }

    .story-four-b {
        vertical-align: top;
        max-width : 1200px;
        text-align: left;
        display : inline-block;
        padding: 0px;
        margin: 0px;
        hyphens: auto;
    }

    .story-wrapper-b4 {
        width: auto;
        min-height:100px;
        overflow: auto;
        max-width:1200px; 
        text-align:center;
        margin-left:20px; 
        margin-right:20px;   
    }
    
    .story-one-b4 {
        vertical-align: bottom;
        max-width : 500px;
        text-align: center;
        display : inline-block;
        padding: 0px;
        margin: 0px;
        hyphens: auto;
    }
    
   .story-two-b4 {
        vertical-align: bottom;
        max-width : 100px;
        text-align: right;
        display : inline-block;
        padding: 0px;
        margin-right: 10px; 
        hyphens: auto;
    }

    .story-three-b4 {
        vertical-align: bottom;
        max-width : 150px;
        text-align: left;
        display : inline-block;
        padding: 0px;
        margin-left: 10px;
        hyphens: auto;
    }

    .story-four-b4 {
        vertical-align: bottom;
        max-width : 500px;
        text-align: center;
        display : inline-block;
        padding: 0px;
        margin: 0px;
        hyphens: auto;
    }

    .story-wrapper-pr2 {
        width: auto;
        text-align: center;
        margin: 0 auto;
        background-color:#F2F2F2;
        overflow: auto;
    }

    .story-one-pr2 {
        vertical-align: top;
        width : 180px;
        height: 250px;
        text-align: center;
        display : inline-block;
        padding: 0px;
        margin-top: 0px;
        hyphens: auto;
    }

    .story-two-pr2 {
        vertical-align: top;
        width : 180px;
        height: 250px;
        text-align: center;
        display : inline-block;
        padding: 0px;
        margin: 0px;
        hyphens: auto;
    }

    .story-three-pr2 {
        vertical-align: top;
        width : 10px;
        height:1px;
        text-align: left;
        display : inline-block;
        padding: 0px;
        margin: 0px;
        hyphens: auto;
    }

    /* Version zum Testen vom Head. */
    .story-one-q {
        vertical-align: top;
        max-width : 150px;
        min-height: 410px;
        text-align: left;
        display : inline-block;
        padding: 10px;
        hyphens: auto; /* Silbentrennung */
        border: 1px solid lightgrey;
    }

    .story-two-q {
        vertical-align: top;
        max-width : 150px;
        min-height: 410px;
        text-align: left;
        display : inline-block;
        padding: 10px;
        hyphens: auto; /* Silbentrennung */
        border: 1px solid lightgrey;
    }

    .story-three-q {
        vertical-align: top;
        max-width : 150px;
        min-height: 410px;
        text-align: left;
        display : inline-block;
        padding: 10px;
        hyphens: auto; /* Silbentrennung */
        border: 1px solid lightgrey;
    }

    .story-four-q {
        vertical-align: top;
        max-width : 150px;
        min-height: 410px;
        text-align: left;
        display : inline-block;
        padding: 10px;
        hyphens: auto; /* Silbentrennung */
        border: 1px solid lightgrey;
    }

    .story-five-q {
        vertical-align: top;
        max-width : 150px;
        min-height: 410px;
        text-align: left;
        display : inline-block;
        padding: 10px;
        hyphens: auto; /* Silbentrennung */
        border: 1px solid lightgrey;
    }

    .story-six-q {
        vertical-align: top;
        max-width : 150px;
        min-height: 410px;
        text-align: left;
        display : inline-block;
        padding: 10px;
        hyphens: auto; /* Silbentrennung */
        border: 1px solid lightgrey;
    }
/* Das folgende wird z.B. auf der Seite "ehejubilaeum-2023.php" verwendet. */

    .story-wrapper-d {
        width: auto;
        min-height:400px;
        overflow: auto;
        max-width:1200px; 
        text-align:center;
        margin-left:20px; 
        margin-right:20px;  
    }

    .story-one-d {
        vertical-align: top;
        max-width : 350px;
        text-align: left;
        display : inline-block;
        padding: 10px;
        margin: 10px;
        hyphens: auto;        
        background-color: rgb(242, 243, 244);
    }

    .story-two-d {
        vertical-align: top;
        max-width : 350px;
        text-align: left;
        display : inline-block;
        padding: 10px;
        margin: 10px;
        hyphens: auto;                
        background-color: rgb(242, 243, 244);
    }

    .story-three-d {
        vertical-align: top;
        max-width : 350px;
        text-align: left;
        display : inline-block;
        padding: 10px;
        margin: 10px;
        hyphens: auto;                
        background-color: rgb(242, 243, 244);
    }

    /* Divi Buttons nebeneinander platzieren. Jeder Button braucht jede Klasse. class="inline-btns et_pb_button_module_wrapper"  */
    .inline-btns .et_pb_button_module_wrapper {
        display: inline-block;
        margin: 0 10px;
    }

    .box-shadow1 {
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }

    .box-shadow2 {
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px;
    }

/*==================================================
* Effect 6
* ================================================*/      
    
    .effect6 {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    
    .effect6:before, .effect6:after {
    content: "";
    position: absolute;
    z-index:-1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    top: 50%;
    bottom: 0;
    left: 10px;
    right: 10px;
    
    }
    .effect6:after {
    right: 10px;
    left: auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
    }

/* Das folgende steht in Verbindung zu einer Flexbox die hauptsächlich für die Einträge im Body verwendet wird. */
    .container-1 {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    max-width: 1200px;
    text-align: left;
    }
    .container-1 div{	
        box-sizing: border-box;
        padding: 1em;    
        flex-basis: 250px;
        flex-grow: 1;
        }
    .div-small-1a {
        width:auto;
        max-width:350px
    }
    .div-big-1a {
        width:auto;
        max-width:850px
    }

    .container-2 {
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
        max-width: 1200px;
        text-align: left;
    }
    .container-2 div{	
        box-sizing: border-box;
        padding: 1em;    
        flex-basis: 250px;
        flex-grow: 1;
        }
    .div-small-2a {
        width:auto;
        max-width:600px
    }
    .div-big-2a {
        width:auto;
        max-width:850px
    }

    /* ************************************************************************************* */
    /* Man kann mit den folgenden Einstellungen Bilder einblenden wenn die Seite aufgerufen wird. */    
    /* ************************************************************************************* */
        
    p.absatz {

    animation: einblenden 2.5s;
    -moz-animation: einblenden 2.5s; /* Für Firefox */
    -webkit-animation: einblenden 2.5s; /* Für Safari und Chrome */
    -o-animation: einblenden 2.5s; /* Für Opera */
    }

    @keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }
    }

    @-moz-keyframes einblenden { /* Für Firefox */
    from { opacity:0; }
    to { opacity:1; }
    }

    @-webkit-keyframes einblenden { /* Für Safari und Chrome */
    from { opacity:0; }
    to { opacity:1; }
    }

    @-o-keyframes einblenden { /* Für Opera */
    from { opacity:0; }
    to { opacity:1; }
    }
    
    /* Die folgenden zwei Einträge gehören zu den Diashows. 

    .example-image {
        width: 15rem;
        border-radius: var(--border-radius);
    }

    .example-image-link {
        display: inline-block;
        padding: 4px;
        margin: 0 0.5rem 1rem 0.5rem;
        background-color: var(--bg-color);
        line-height: 0;
        border-radius: var(--border-radius-large);
    }
    */