body                                                       {position:relative;}
#spalte1                                                   {position:absolute; z-index:100; width:100vw; max-width:320px; top:100px; justify-self:center; padding:15px; border-radius:20px; background:var(--dblau); transition:.5s; opacity:0; transform:scale(0);}
#spalte1.modalAktiv                                        {transition:.5s; opacity:1; transform:scale(.85);}
#spalte1 .modalClose                                       {position:absolute; display:grid; top:0; right:0; width:25px; height:25px; align-content:start; justify-content:center; color:#fff; border-radius:50%; background:var(--dblau); box-shadow:0 0 0 2px var(--dblau); cursor:pointer;}
#spalte1 .modalTitel                                       {position:relative; display:block; width:100%; padding:10px 0; color:var(--dblau); font-size:20px; font-weight:bold; text-align:center; border-radius:10px 10px 0 0; background:#fff;}
#spalte1 .modalContent                                     {padding:10px 1px; text-align:center; background:#eee;font-size:16px; color:var(--dblau);}
#spalte1 .modalContent                                    {}
#spalte1 .modalBase,
#spalte1 .modalBase *                                      {color:#fff; font-size:14px; text-align:center; text-decoration:none;}
#spalte1 .modalFplan                                       {position:relative; display:block; width:100%; margin:10px 0 15px; padding:10px 5px; font-size:20px; font-weight:650; color:var(--dblau); text-decoration:none; text-align:center; border-radius:5px; background:#fff;}
#spalte1 .modalContent .meldungen                          {padding:15px 5px;}
#spalte1 .modalContent .meldungen:not(:last-child)         {border-bottom: 1px solid #fff;}

#modal                                                     {position:absolute; display:grid; top:0; left:0; width:100vw; margin:0; }

#spalte1 .modalFplan:hover {background:var(--hblau);}
#spalte1 .modalClose:hover {background:var(--hblau); color:var(--dblau);}


.meldungen.meldung-rot                                      {background:#fff0f7;}
.meldungen.meldung-rot a                                    {color:#f00;}


@media screen and (min-width:900px){
 #modal                                                     {left:0; width:100vw; max-width:1800px; margin:0 auto; }
 #spalte1                                                   {left:25px; transform:scale(0);}
 #spalte1.modalAktiv                                        {left:25px; transform:scale(1);}
}


@media screen and (min-width:1800px){
 #modal                                                     {left:0; width:100vw; max-width:1800px; margin:0 auto; }
 #spalte1                                                   {left:calc(50vw - 880px); transform:scale(0);}
 #spalte1.modalAktiv                                        {left:calc(50vw - 880px); transform:scale(1);}
}