@charset "utf-8";
/* CSS Document */

/* Grundlayout für Initiative Franziskuswege */

html {
        background: transparent!important;    background: pink;
}

body {
	margin: 0.5em auto;
	max-width: 1250px;
        background-color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px;
	color: #333333;
}

main, aside, main svg {
	border-radius: 0 8px 8px;
	border: 1px solid;
	padding: 0.5em;
	margin: 0.5em;
}

h1 {
        flex: 2;
        flex-wrap: wrap;
      /*  border-color: #d5d5d5;  */
}
h4 {
     font-weight:bold;
   }

blockquote { 
	     font-size: 90%;
           }
/*
h1::after {
           content: url("../images/a/a2_tau_gruen_150x144.jpg");
           margin-top: -90px;
          }
*/
/* article img {
	width: 33%;
	float: right;
	margin-left: 0.2em;
}  */

figure {
  display: inline-block;
/*  width: 30%; */
  margin: 0.2em;
}
figure img {
  width: 100%;
}

figure figcaption {
  font-style: italic;
}

#logo {
/*  background: #F1F3F4 url("https://wiki.selfhtml.org/images/a/ad/Selfhtml-beispiel_150.svg") 0px 0px no-repeat;  */
/*    background-color: #FFFFFF;  */
    background-image: url('../images/logo_150x146.png');
    background-repeat: no-repeat;
  display: block;
  width:152px;
  height: 148px;
  border: 1px solid transparent; 
/*  font: 0/0 a; */
  text-shadow: none;
  color: transparent;
}

main {
	display: block;     /* für IE */	
	min-height: 400px;
}

/* aside {
	background: #ffffff;
	border-color: #000000;
} 
 */
#hinweis {                    /* für Container */

	border-left: 5px solid #c32e04;
}

.hinweis {                    /* für Textzeile */
        color: #c32e04; 
        font-style: italic; 
        border-bottom: 1px dotted; 
        display:inline-block; 
}
a {
  color: #333333;
}
#news { position: sticky; }

#news a {
        border-radius: 0 10px 12px;
        margin-left: 5px;
        width: 255px;
        text-align: left;
        min-height: 14px;
        font-size: 0.9em;
}
a.liste { font-family:Verdana, Arial, Helvetica, sans-serif; 
  font-size:1.9em; display:block; margin-top:10px; margin-left:10px; text-align:left; width:255px; border-style:solid; 
  border-width:1px; border-color:#666666; padding:2px; padding-left: 8px;
}
a.liste:link { color:#000000; text-decoration:none;} 

a.liste:visited { color:#000000; text-decoration:none;} 

a.liste:hover { color:#FFFFFF; background-color:#666666; border-color:#666666; text-decoration:none; } 

a.liste:active { color:#FFFFFF; background-color:#aaaaaa; text-decoration:none; } 

.liste a[aria-current=page] {
	color: #ffffff;
        background-color: #aaaaaa;
}


/* responsives Layout */

body {
  display: flex;
  flex-flow: row wrap;
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, nav a,  section,  footer {
  border-radius: 0px 0.5em 0.5em;
  border: 1px solid #000000;
  padding: 0.5em;
  margin: 0.5em;
  flex: 1 1 100%;
}
aside {
  min-height: 620px;
  border-radius: 0px 0.5em 0.5em;
  border: 1px solid #000000;
  padding: 0.5em;
  margin: 0.5em;
  flex: 1 1 100%;
}
article {
  min-height: 620px;
  border-radius: 0px 0.5em 0.5em;
  border: 1px solid #000000;
  padding: 1.0em;
  margin: 0.5em;
  flex: 1 1 100%;
}

header {
/*  background-image: url('../images/bg_1250x280.jpg');
  background-repeat: no-repeat;
  background-position: center; */
  background-color: #ffffff;   /* #F1F3F4; */
  border-color: #000000;
  min-height: 200px;
  display: flex;
  flex-flow: row wrap;
}

/* header{
  background-color: #ffffff;   /* #F1F3F4; */
  border-color: #000000;
  display: flex;
  flex-flow: row wrap;
}
 */
header * {
  flex: 1 1 0%;
  margin: 0 1em;
}
header img {
  flex: 0 0 150px;
  order: 1;
  margin-right: 1px;
}
header h1 {
  flex: 4 1 0%;
}

header nav {
  flex: 1 1 100%;
  margin: 0.5em 0.5em;
  border-color: #000000;
}
nav ul, nav li{
  margin: 0 0.5em;
  padding: 0 0.5em;
  border: 1;
}
nav ul {
  display: flex;
  flex-direction: column;
}
nav li {
  list-style-type:none;
  margin: 1.3em 0em 0em 0.8em;
  flex: 1 1 100%;
}
nav a {
  color: #000000;
  display: inline-block;
  width: 95%;
  background: #ebf5d7;
  border: 1px solid #000000;
  margin: 0;
  text-decoration: none;
  text-align: center;
}
nav { border: 0; }

nav a:hover, nav a:focus {
  color:#FFFFFF; 
  background-color:#000000; 
  border-color:#000000;
}

news a[aria-current=page] {
	color: #000000;
	font-weight:normal;
        background-color: #ffffff;
}
nav a[aria-current=page]:hover, a[aria-current=page]:focus {
  font-weight:normal;
  color:#FFFFFF; 
  background-color:#000000; 
  border-color:#000000;
}
section {
  background: #F1F3F4;
  border-color: slateblue;
}
article {
  background: #ffffff;
  border-color: #000000;
}
aside {
  background: #ffffff   /* #ebf5d7; */
  border-color: #000000;
}
footer {
  background: #ffffff; /* #e4ebf2; */
  border-color: #000000;
  display: flex;
  flex-flow: row wrap;
}
footer * {
  flex: 1 1 0%;
  justify-content: space-between;
}
footer p:last-child {
  text-align: right;
}
footer h4:last-child {
  text-align: right;
}

.logo2_img {
            margin-top: -90px;
            margin-right: 30px; 
           }

/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
header img {
  margin-right: 50px;
}
nav ul {
  flex-direction: row;
  flex: 1 1 80%;
}
nav li {
  margin: 0 10px;
  flex: 1 1 0%;
}
article {
  order: 2;
}
#news {
  flex: 1 auto;
  order: 3;
}
aside {
/* durch auto werden die beiden asides in eine Zeile gesetzt */
  flex: 1 auto;
  order: 4;
}
footer {
  order: 5;
}
}

/* Large screens */
@media all and (min-width: 50em) {
  article {    /* Der Article wird 2.5x so breit wie die beiden asides! */
    order: 3;
    flex: 3 1 0%;
  }
  aside {
    flex: 1 1 0%;
  }
  #news {
    flex: 1 1 0%;	  
    order: 2;
 /*    align-self: center;  */
 /*    height: 100%;  */
  }
}

caption {
	caption-side: bottom;
	padding-top: 2em;
	font-style: italic;
}
.startseite { font-family: Verdana, Ariel, Helvetice, sans-serif;
              line-height: 1.5em;
              text-align: justify;
             }
.firstpict   { margin-top: 1em; padding-right: 1.0em; }
.pict-Set    { margin-top: 1em; margin-right: 2.0em; border: 1px solid #008000; padding: 2px;}
.wege-set    { margin-top: 0em; padding-right: 0.8em; float: right;}
.start-set   { margin-left: 1.25em; }
.start-set_2  { margin-left: 6.00em; }
.anfahrt-set { margin-left: auto; margin-right: auto;  text-align: center;}
.anfahrt-link { }
.bold { font-weight:bold; }
.rot_bold { font-weight:bold;
            color: red;
          }
.page_top {
            font-family:Verdana, Arial, Helvetica, sans-serif;
            display: inline;
            border-radius: 0px 8px 8px 8px;
            width: 46px;
            height: 44px;
            margin-bottom: 0.5em;
            margin-right: 0.5em;
            background-color: #ffffff;
            font-size: 1.5em;
            color: #000000;
            border: 3px solid white;
            text-decoration: underline;
            text-align: center;
            float: right;
          }
.init20dgreen { width: 1em; height: 1.20em; float: left; font-size: 200%; color: DarkGreen; font-style: bold }
.zweispalten  {
                -webkit-columns: 2 20em;
                columns:         2 20em;
                column-gap:         3em;
		font-size:        0.9em;
               }
.inhalte-werden-zentriert {
  display: table;
  margin-left: auto;
  margin-right: auto;	
}
.startseite_1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}


.content { margin-left: 3em; margin-right: 3em; }
.content_2 { margin-left: 10%; margin-right: 10%; }
.zentriert  { display: table-cell; }
.blocksatz { text-align: justify; }
.mittig {text-align: center; }
.weihn { text-align: center; font-size: 14pt; font-style: bold; color: black;}
.italic { font-style: italic; }
.zeil_1_5 { line-height: 1.5em; }
.verstxt { line-height: 2.25em; font-size: large; }
.versueb { font-size: 1.25em; text-align: center; }
.hellgruen { background-color: hsl(60 85% 80% /1.0); }
