/* ======================================================================
Stylesheet fuer die Seiten vom Hospizverein Kirchheim
Datei: bildschirm.css
Datum: 28. April 2017
Revision: 14.11.2023
Autor: Peter und Richard

Aufbau: 1. Kalibrierung und allgemeine Styles
        2. Styles fuer Layoutbereiche
        3. Sonstige Styles
========================================================================== */

/* ======================================
   1. Kalibrierung und allgemeine Styles
   ====================================== */

/* Kalibrierung der wichtigsten Abstaende */
  { padding: 0; margin: 0; }

/* Allgemeine Selektoren */
html { height: 101%; margin-top: 0px;} /* erzwingt Scrollbar im Firefox */

/*@font-face { font-family: Hospiz-1;
     src: url('blokletters.woff') format('woff'); }  */

#c333 {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 1.2em;
  line-height: 1.3;
  }
#angelika { text-align: center;
           padding-top:25px;
            padding-bottom:25px;
}

body {
     color: white;
     background-image: url(../images/spirale-transparent.png); background-repeat:no-repeat;
   /*  background-image: none,url(../images/spirale-transparent.svg); url(../images/spirale-transparent.png); background-repeat:no-repeat; */
     position: relative;
     background-position: 50% 120px;*/
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: small;
     margin-top: 0px;
     margin-bottom: 20px;
}


a img { outline: none; border: 0;}

/*.csc-textpic-single-image {
     margin-top:10px;
     margin-bottom:0px;
     margin-right:0px;
     margin-left:0px;
}*/

h1 { font-size: 130%; }
h2 { font-size: 120%; color: #C40F27;}

address {
   color: #808080;
   font-family: Hospiz-1, Verdana, Arial, Helvetica, sans-serif;
   text-align: center;  /* zentrieren */
   font-size: 10px;
   line-height:18px;
   font-style: normal;   /* normale Schrift, nicht kursiv */
}

/* Hyperlinks allgemein */
/*a { text-decoration: none; outline: none; } /* Unterstreichung entfernen */


/* Allgemeine Klassen und IDs */
.skiplink {
     position: absolute;
     top: -2000px;
     left: -3000px;
     width: 0px;
     height: 0px;
     overflow: hidden;
     display: inline;
}

/*Tabellen---------------------------*/
table {
   font-family: Hospiz-1, Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height:18px;
   vertical-align:top;
   border-collapse: collapse;
   margin: 0px;
   margin-right: 10px;
   padding: 0px;
   }
th {
   padding: 5px;
   border: 0px solid #000;
   background-color: #DDDDDD;
   }
td {
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 7px;
   padding-bottom: 7px;
   border: 0px solid #000;
   vertical-align:middle;
   }
thead {
   padding: 0px;
   background-color: #DDDDDD;
   }
tbody {

   }
tr:nth-child(even) {background: #DDD;}
tr:nth-child(odd) {background: #FFF;}

.aktuelletermine .td-0 {width: 80px;}
.aktuelletermine .td-3 {width: 110px;}

/* ====================================
   2. Styles fuer die Layoutbereiche
   ==================================== */

#wrapper {
     color: black;
     /*background: rgba(255,206,0,0.3);  */
     width: 1000px; /* Breite des Inhaltbereiches der ganzen Seite */
     margin-top: 15px;
     margin-right: auto; /* Abstand rechts automatisch */
     margin-bottom: 0px;
     margin-left: auto; /* Abstand links automatisch */
     padding: 0px;
     border: 1px solid #DDDBDB;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;
     box-shadow: 0px 0px 15px #888;
}
#kopfbereich {
     background-image: url(../images/banner.png); background-repeat:no-repeat;
     /*background-image: none,url(../images/banner.svg); url(../images/banner.png); background-repeat:no-repeat; */
     background-position:0px 0px;
     color: black;
     padding-left: 0px;
         padding-right: 0px;
         padding-top: 158px;
         padding-bottom: 0px;
     border: 0px;
     border-bottom: 1px solid #DDDBDB;
     border-radius: 30px;
     margin: 0px;
     margin-bottom: 60px;
     box-shadow: 0px 6px 6px #999;
}

#navibereich1 {
     float: left;
     margin: 0px;
     padding-left: 2%; /*20*/
     padding-top: 10px;
     width: 24%;
     font-family: Hospiz-1, Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     line-height: 26px;
}

     #navibereich1 li { /* aendert in navibereich die Liste (li) */
         display: block;  /* li untereinander anzeigen (inline)*/
         list-style-type: none; /* ohne Aufzaehlungspunkte */
         font-size: 95%; /* Schriftgroesse des Navibereiches */
         margin: 0px;
         margin-left: -35px;
         box-shadow: 5px 5px 15px #888;
         }

     #navibereich1 a { text-decoration: none; outline: none; } /* Unterstreichung entfernen */
     #navibereich1 a {
        margin: 0px;
     }

    .klasse-home, .klasse-aktuelle-termine, .klasse-wir-ueber-uns, .klasse-hospiz-aktuell, .klasse-trauer, .klasse-vorsorge, .klasse-aktuelles, .klasse-fragen-und-antworten, .klasse-links, .klasse-impressum, .klasse-datenschutz {
                  display:block;
                  background-image: -moz-linear-gradient(top, white 25%, #ddd 75%);
                  background-image: -webkit-linear-gradient(top, white 25%, #ddd 75%);
                  background-image: -ms-linear-gradient(top, white 25%, #ddd 75%);
                  background-image: -o-linear-gradient(top, white 25%, #ddd 75%);
                  width: 200px;
                  }

     .klasse-home a:link, .klasse-aktuelle-termine a:link, .klasse-wir-ueber-uns a:link, .klasse-hospiz-aktuell a:link, .klasse-trauer a:link, .klasse-vorsorge a:link, .klasse-aktuelles a:link, .klasse-fragen-und-antworten a:link, .klasse-links a:link, .klasse-impressum a:link, .klasse-datenschutz a:link
      {color: #808080; padding-left:20px;}

     .klasse-home a:visited, .klasse-aktuelle-termine a:visited, .klasse-wir-ueber-uns a:visited, .klasse-hospiz-aktuell a:visited, .klasse-trauer a:visited, .klasse-vorsorge a:visited, .klasse-aktuelles a:visited, .klasse-fragen-und-antworten a:visited, .klasse-links a:visited, .klasse-impressum a:visited, .klasse-datenschutz a:visited
      {color: #808080; padding-left:20px;}

     .klasse-home a:hover, .klasse-aktuelle-termine a:hover, .klasse-wir-ueber-uns a:hover, .klasse-hospiz-aktuell a:hover, .klasse-trauer a:hover, .klasse-vorsorge a:hover, .klasse-aktuelles a:hover, .klasse-fragen-und-antworten a:hover, .klasse-links a:hover, .klasse-impressum a:hover, .klasse-datenschutz a:hover
                  {
                  display:block;
                  background-image: -moz-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -webkit-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -ms-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -o-linear-gradient(top, #bbb 25%, #ddd 75%);
                  color:black;
                  }

     .klasse-home a:focus, .klasse-aktuelle-termine a:focus, .klasse-wir-ueber-uns a:focus, .klasse-hospiz-aktuell a:focus, .klasse-trauer a:focus, .klasse-vorsorge a:focus, .klasse-aktuelles a:focus, .klasse-fragen-und-antworten a:focus, .klasse-links a:focus, .klasse-impressum a:focus, .klasse-datenschutz a:focus
                  {
                  display:block;
                  background-image: -moz-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -webkit-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -ms-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -o-linear-gradient(top, #bbb 25%, #ddd 75%);
                  color:black;
                  }

      .klasse-home a:activ, .klasse-aktuelle-termine a:activ, .klasse-wir-ueber-uns a:activ, .klasse-hospiz-aktuell a:activ, .klasse-trauer a:activ, .klasse-vorsorge a:activ, .klasse-aktuelles a:activ, .klasse-fragen-und-antworten a:activ, .klasse-links a:activ, .klasse-impressum a:activ, .klasse-datenschutz a:activ {}

     #home .klasse-home, #aktuelle-termine .klasse-aktuelle-termine, #wir-ueber-uns .klasse-wir-ueber-uns, #hospiz-aktuell .klasse-hospiz-aktuell, #trauer .klasse-trauer, #vorsorge .klasse-vorsorge, #aktuelles .klasse-aktuelles, #fragen-und-antworten .klasse-fragen-und-antworten, #links .klasse-links, #impressum .klasse-impressum, #datenschutz .klasse-datenschutz {
                  display:block;
                  background-image: -moz-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -webkit-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -ms-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -o-linear-gradient(top, #bbb 25%, #ddd 75%);
                  width: 200px;
               }
     #home .klasse-home a:link, #aktuelle-termine .klasse-aktuelle-termine a:link, #wir-ueber-uns .klasse-wir-ueber-uns a:link, #hospiz-aktuell .klasse-hospiz-aktuell a:link, #trauer .klasse-trauer a:link, #vorsorge .klasse-vorsorge a:link, #aktuelles .klasse-aktuelles a:link, #fragen-und-antworten .klasse-fragen-und-antworten a:link, #links .klasse-links a:link, #impressum .klasse-impressum a:link, #impressum .klasse-datenschutz a:link {color: #808080; padding-left: 20px;}
     #home .klasse-home a:visited, #aktuelle-termine .klasse-aktuelle-termine a:visited, #wir-ueber-uns .klasse-wir-ueber-uns a:visited, #hospiz-aktuell .klasse-hospiz-aktuell a:visited, #trauer .klasse-trauer a:visited, #vorsorge .klasse-vorsorge a:visited, #aktuelles .klasse-aktuelles a:visited, #fragen-und-antworten .klasse-fragen-und-antworten a:visited, #links .klasse-links a:visited, #impressum .klasse-impressum a:visited, #datenschutz .klasse-datenschutz a:visited {}
     #home .klasse-home a:hover, #aktuelle-termine .klasse-aktuelle-termine a:hover, #wir-ueber-uns .klasse-wir-ueber-uns a:hover, #hospiz-aktuell .klasse-hospizaktuell a:hover, #trauer .klasse-trauer a:hover, #vorsorge .klasse-vorsorge a:hover, #aktuelles .klasse-aktuelles a:hover, #fragen-und-antworten .klasse-fragen-und-antworten a:hover, #links .klasse-links a:hover, #impressum .klasse-impressum a:hover, #datenschutz .klasse-datenschutz a:hover {
                  background-image: -moz-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -webkit-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -ms-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -o-linear-gradient(top, #bbb 25%, #ddd 75%);
                  color:black;
                  }
      #home .klasse-home a:focus, #aktuelle-termine .klasse-aktuelle-termine a:focus, #wir-ueber-uns .klasse-wir-ueber-uns a:focus, #hospiz-aktuell .klasse-hospizaktuell a:focus, #trauer .klasse-trauer a:focus, #vorsorge .klasse-vorsorge a:focus, #aktuelles .klasse-aktuelles a:focus, #fragen-und-antworten .klasse-fragen-und-antworten a:focus, #links .klasse-links a:focus, #impressum .klasse-impressum a:focus, #datenschutz .klasse-datenschutz a:focus {
                  background-image: -moz-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -webkit-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -ms-linear-gradient(top, #bbb 25%, #ddd 75%);
                  background-image: -o-linear-gradient(top, #bbb 25%, #ddd 75%);
                  color:black;
                  }
     #home .klasse-home a:activ, #aktuelle-termine .klasse-aktuelle-termine a:activ, #wir-ueber-uns .klasse-wir-ueber-uns a:activ, #hospiz-aktuell .klasse-hospizaktuell a:activ, #trauer .klasse-trauer a:activ, #vorsorge .klasse-vorsorge a:activ, #aktuelles .klasse-aktuelles a:activ, #fragen-und-antworten .klasse-fragen-und-antworten a:activ, #links .klasse-links a:activ, #impressum .klasse-impressum a:activ, #datenschutz .klasse-datenschutz a:activ {}
  

     .menu_5 {
                  display:block;
                  background-image: -moz-linear-gradient(top, #eee 0%, white 50%);
                  background-image: -webkit-linear-gradient(top, #eee 25%, white 75%);
                  background-image: -ms-linear-gradient(top, #eee 25%, white 75%);
                  background-image: -o-linear-gradient(top, #eee 25%, white 75%);
                  width: 200px;
                  height: 3px;
                  border-bottom-left-radius: 0px;
                  border-bottom-right-radius: 0px;
                  border-top-left-radius: 3px;
                  border-top-right-radius: 3px;
                  }

        .menu_6 {
                  display:block;
                  background-image: -moz-linear-gradient(top, #ccc 0%, #bbb 75%);
                  background-image: -webkit-linear-gradient(top, white 25%, #ddd 75%);
                  background-image: -ms-linear-gradient(top, white 25%, #ddd 75%);
                  background-image: -o-linear-gradient(top, white 25%, #ddd 75%);
                  width: 200px;
                  height: 5px;
                  border-bottom-left-radius: 5px;
                  border-bottom-right-radius: 5px;
                  border-top-left-radius: 0px;
                  border-top-right-radius: 0px;
                  }

#spiralbereich {
                  font-family: Hospiz-1, Verdana, Arial, Helvetica, sans-serif;
                  font-size: 11px;
                  line-height: 20px;
                  color: #777;
                  margin-left: 7px;
                  width: 200px;
                  height: 150px;
                  padding: 0px;
                  border-bottom-left-radius: 20px;
                  border-bottom-right-radius: 20px;
                  border-top-left-radius: 20px;
                  border-top-right-radius: 20px;
                  box-shadow: 5px 5px 15px #888;
                  margin-bottom: 10px;
}

#seitennummer75 #spiralbereich {
     position: absolute;
     top: -2000px;
     left: -3000px;
     width: 0px;
     height: 0px;
     overflow: hidden;
     display: inline;
}

#seitennummer75 .csc-textpic-single-image
{
                  height: 502px;
                  margin: 0;
                  padding: 0;
                  margin-top: 14px;
                  margin-bottom: 40px;
                  margin-left: 60px;
                  box-shadow: 5px 5px 15px #888;
}



#seitennummer77 .csc-textpic-image img
{
                  width: 680px;
                  height: auto;
                  margin: 0;
                  padding: 0;
                  margin-top: 0px;
                  margin-bottom: 0px;
                  margin-left: 0px;
}


#textbereich {
     float: right;
     width: 70%;
     font-family: Hospiz-1, Verdana, Arial, Helvetica, sans-serif;
     font-size: 13px;
     line-height: 29px;
     border: 0px solid #999999;
     padding-top: 10px;
     padding-right: 2%;
     padding-bottom: 20px;
     padding-left: 2%;
}

#textbereich a {
           display: inline;
           outline: none;
           margin: 0;
           padding: 0;
}

#textbereich p {
     margin-top: 0;
     margin-bottom:0;
}

#textbereich ul {
     margin-left: 0.2em;
     padding-left: 1.6em;
     list-style-position: outside;
     list-style-image: url(../images/spirale-list-12px.png);
     /*list-style-type:disc;*/
         }
#textbereich ol {
         margin-left:0;
         padding-left:1.6em;

         }

         #textbereich li {
          }
    #textbereich a { text-decoration: none; outline: none; } /* Unterstreichung entfernen */
    #textbereich a:link { color: black; text-decoration: underline; }
    #textbereich a:visited { color: black; }
    #textbereich a:focus { color: black;
                           display: inline;
                           background: none;
                           margin:0;
                           padding:0;

     }
    #textbereich a:hover { color: #888888; }
    #textbereich a:active {outline: none;
                           color: black;
                           display: inline;
                           background: none;
                           margin:0;
                           padding:0;   }


.download {
           display: block;
           outline: none;
           margin: 0;
           padding: 0;
}

    #linkbereich {
     position: absolute;
     top: -2000px;
     left: -3000px;
     width: 0px;
     height: 0px;
     overflow: hidden;
     display: inline;
      }

#fussbereich {
     clear: both;
     padding-top: 15px; /* unterhalb Rahmenlinie */
     padding-right: 0px;
     padding-bottom: 15px;
     padding-left: 0px;
     border-top: 1px solid #C0C0C0; /* Farbe der Rahmenlinie */
     margin-top: 0px; /* Aussenabstand oben, oberhalb Linie */
}

#socialmedia {
     position: relative;
     margin: 0;
     padding: 0;
    }

#instagram {
      position: absolute;
      top: 0px;
      left: 55px;
}

#facebook {
      position: absolute;
      top: 0px;
      left: 20px;
      }


#adresszeile {
     margin-right: 60px;
}

/* ===============================================
   E N D E     D E S       S T Y L E S H E E T S
   =============================================== */