footer            {height: 5em; margin-top: 8em; padding-top: 2em; text-align: center; background-color: #004445; font-size: 0.8em; color: #f0eee9;}
footer a          {line-height: 0; width: 100%; display: inline; font-weight: normal; color: #f0eee9; text-decoration: none}
footer a:hover    {line-height: 0; width: 100%; display: inline; font-weight: normal; color: #f0eee9; text-decoration: none; border-bottom: 1px dashed #cccccc;}
footer a:visited  {line-height: 0; width: 100%; display: inline; font-weight: normal; color: #f0eee9; text-decoration: none}
footer a:active   {line-height: 0; width: 100%; display: inline; font-weight: normal; color: #f0eee9; text-decoration: none;}

hr {border: 0; height: 32px; background: transparent url(https://www.vienna-webdesign.at/images/layout/hr.png) no-repeat scroll center);}

.fett {font-weight:bold;}
.clear_both {clear:both;}
.abseits {position: absolute;  left: -1000px; top: -1000px; width:0px; height: 0px; overflow:hidden; display:inline;}
.center {margin: auto !important; }
.cite {font-size: 80%; font-style: italic;}
.lila {font-size: 1.5em; font-weight: bold; _line-height: .5em; color: #f0eee9; vertical-align: middle; background-color: #6667ab; display: flex; align-items: center; justify-content: center; border: solid #000 1px; margin-bottom: 1em;}
.img_links {float:left; _margin-top: -2px; margin-right:10px; _margin-bottom:-5px; border:solid 0 #000; padding-top: 0px;}
.img_links_schatten {float:left; margin-top: 5px; margin-right:10px; border:solid #000 1px; padding-top: 0px; box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);}
.img_rechts {float:right; margin-top: 5px; margin-left:10px; _margin-bottom:-5px; border:solid 0 #000;padding-top: 0px;}
.img_rechts_schatten {float:right; margin-top: 5px; margin-left:10px; border:solid #000 1px ;padding-top: 0px; box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.1); -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);}

.farbig {background: #dbd5d1; border: 1px solid #2a2d31; margin: 1em 0 .7em -.7em; padding: 0 .7em .7em 1em; border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.1);
-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);}
.farbig h3 {margin-top: -1em; padding-top: 20px;}

/* z. B. Datenschutz-Seite "Wir verarbeiten nur Daten ...." */
ul.aufzaehlungsstrich {list-style: none; margin-left: 0; padding-left: 1em;}
ul.aufzaehlungsstrich > li:before {display: inline-block; content: "-"; width: 1em; margin-left: -1em;}
ul.ohne {list-style: none; margin-left: 0; padding-left: 1em; padding-bottom: 1em;}


/* Nicht  in Verwendung !!!! Header "Informationen" statisch Desktop & Mobil */
_div.img-block {width: auto; height: 300px; _background-image: url("https://www.vienna-webdesign.at/images/header-statisch-02.jpg"); _background-repeat: no-repeat; background-size:cover; border: 1px solid black;}
@media all and (max-width: 992px) {
div.img-block {margin-top: -20px; height:150px;} /* Handy Portrait -Höhe weg Abstand */
}

/* Nicht in Verwendung !!!! Header "Kontakt" statisch Desktop & Mobil */
_div.img-block2 {width: auto; height: 300px; background-image: url("https://www.vienna-webdesign.at/images/kontakt.jpg"); background-repeat: no-repeat; background-size:cover; border: 1px solid black;}
_@media all and (max-width: 992px) {
div.img-block2 {margin-top: -20px; height:150px;} /* Handy Portrait -Höhe weg Abstand */
}



/* stattdessen in Verwendung  !!!! Statisches Bild 100% mit Schatten und Rahmen */
.img-shadow {
width: 100%;
height: auto;
margin-top: 1.5em; 
margin-bottom: 1em;
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.4);
border: solid #000 1px;
}



/* keine Formatierung für "#content a" usw. sonst funktioniert "Pfeil nach oben nicht" */
a          {color: #8b8add; text-decoration: none;}               
a:hover    {color: #8b8add; text-decoration: none; }
a:visited  {color: #8b8add; text-decoration: none;}
a:active   {color: #8b8add; text-decoration: none;}  

#content {width: 100%; padding-top: 80px; margin-top: -15px; }
#content p {margin-top: .1em; margin-bottom: .8em; line-height: 1.7; text-align: justify; }

/* flexible Boxen BG dunkel - ANFANG */
.boxen-style {
background: #dbd5d1; border: 1px solid #2a2d31; margin-right: .7em; margin-bottom: .7em; border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.1);
-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
}
#wrapper {padding-top: 1.5em; display: flex; flex-direction: row;}
#boxen {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
#boxen div{flex: 1; min-width: 200px; padding: .5em;}

@media all and (max-width: 480px) {
#wrapper{display:block;}
} 
/* flexible Boxen BG dunkel ENDE */



/* flexible Boxen BG hell SiteMap, Impressum - ANFANG */
.boxen-style2 {
background: #f8f7f5; border: 1px solid #2a2d31; margin-right: .7em; margin-bottom: .7em; border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.1);
-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
}
#wrapper2 {padding-top: 1.5em; display: flex; flex-direction: row;}
#boxen2 {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
#boxen2 div{flex: 1; min-width: 400px; padding: .5em;}

@media all and (max-width: 480px) {
#wrapper2{display:block;}
#boxen2 div{flex: 1; min-width: 300px; padding: .5em;}
} 
/* flexible Boxen BG hell ENDE */




/* flexible Boxen z.B. Preise - ANFANG */
.boxen-style3 {
background: #fbf9f5; margin-right: 1.5em; margin-bottom: .7em; border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.1);
-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
}
.boxen-style3 h2 {padding: 1em;}
.boxen-style3 p {padding: 1em;}
#wrapper3 {padding-top: 1.5em; display: flex; flex-direction: row;}
#boxen3 {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
#boxen3 div {flex: 1; min-width: 280px; padding: .5em;}

@media all and (max-width: 480px) {
#wrapper3{display:block;}
#boxen3 div{flex: 1; min-width: 300px; padding: .5em;}
} 
/* flexible Boxen BG dunkel ENDE */




/* Ausrichtung rechts für Suche Anfang */
#ssearch p {width: 310px; margin: 0 0 0 auto;}
/* Ausrichtung rechts für Suche Ende */

/* images zentrieren */
_figure {width: auto; text-align: center;}
_#content .anekdoten {margin-left: 5%;}

#content h1 {letter-spacing: .05em; word-spacing: .1em; padding-top: 2em; padding-bottom: 0.4em; text-align: left; font-size: 130%; _font-variant: small-caps; color : #003b46; _text-transform: uppercase; } 
#content h2 {padding-top: 1.5em; padding-bottom: 0.4em; text-align: left; font-size: 120%; color : #003b46; _text-transform: uppercase; }
#content h3 {padding-top: 1.5em; padding-bottom: 0.4em; text-align: left; font-size: 120%; color : #003b46; _text-transform: uppercase; }
#content h4 {padding-top:  .3em; padding-bottom: 0.1em; text-align: left; font-size: 110%; color : #003b46; _text-transform: uppercase; }
#content h5 {padding-top: 1.5em; padding-bottom: 0.4em; text-align: left; font-size: 110%; color : #003b46; _text-transform: uppercase; }
#content h6 {padding-top: 1.5em; padding-bottom: 0.4em; text-align: left; font-size: 110%; color : #003b46; _text-transform: uppercase; }

/* Externer Link mit Arrow dahinter */
[href^="http"]:not([href*="vienna-webdesign.at"])::after {
  content: '(external link)';
  display: inline-block;
  width: 1em;
  height: 1em;
  text-indent: 1em;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(https://www.vienna-webdesign.at/images/layout/icon-link-extern.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75% auto;
} 

#farbig {display: flex; display: -webkit-flex; height: 6em; width: 100%; margin: auto; margin-top: 4em; _border-radius: 10px; _border: 5px solid black; background-color: #a79e8b;}
#farbig p {color: #2a2d31; text-align: center; margin: auto; /* Important */ font-family: CorradineHandwriting-Italic; font-size: 200%;}

/* ************************************************************   Mobile ANFANG  ********************************************************************** */

@media screen and (max-width:767px) {                   


#content p { line-height: 1.7; text-align: left; }

#breadcrumb {display:none;}
#ssearch {display:none;}

/* für Header-Bild */
_.skalieren {margin-top: -15px; width: 100%; height: 250px;}

footer            {height: 5em; margin-top: 8em; padding-top: 0.5em; text-align: center; background-color: #004445; font-size: 0.8em; color: #f0eee9;}


}
/* *****************************************************************   Mobile ENDE  *************************************************************************** */   





 /* *****************************************************************   767px ANFANG  *************************************************************************** */

@media screen and (min-width:767px) {

/* Link zum Seitenanfang setzen */
#seitenanfang:link, #seitenanfang:visited, #seitenanfang:active, #seitenanfang:hover {
 position: Fixed;
 bottom: 25px;
 right: 25px;
 border-style: Solid;
 border-width: 0 10px 20px 10px;
 border-color: Transparent Transparent rgba(0,0,0,0.125) Transparent;
 text-decoration: None;
 outline: 0;
 width: 0;
}  

.clear_both {clear: both;}

#breadcrumb            {font-weight: normal; font-size: 0.8em;}
.breadcrumb a          {color: #000; text-decoration: none;}               
.breadcrumb a:hover    {color: #000; text-decoration: none; border-top: solid 1px #000; border-bottom: solid 1px #000;}
.breadcrumb a:visited  {color: #511781;}
.breadcrumb a:active   {color: #511781; text-decoration: none; border: solid 1px #511781;}

#search {width: auto; margin-top: -5px; margin-right: 0; padding: 0;}

article	p {padding-top: 1em; padding-bottom: 1em; columns: 2 300px; column-gap: 3em; text-align: justify;}    

.box {float: left; width: 50%; margin-top: 20px; padding-top: 10px; padding-right: 20px; box-sizing: border-box;} /* 2-spaltig - Kontaktformular & Kontaktdaten + breadcrumb & Suche */

    
}
/* *****************************************************************767px ENDE  *************************************************************************** */





/* *****************************************************************PRINT ANFANG  *************************************************************************** */
@media print {
/* Druckformatierung */

body {width: 21cm; height: 29.7cm; margin-top: 5em; padding: 0; font-size: 1em;}


.slider          {display: none;}

#slideshow       {display: none;}

#content         {width: 21cm; height: 29.7cm; margin-top: -100px; border-top: solid #000 0; color: #000;}
#content h1      {padding-left: 5px; _padding-top: 5px; padding-bottom: 15px; font-size: 1.2em; color: #000;}
#content h2      {padding-left: 5px; _padding-top: 5px; padding-bottom: 20px; font-size: 1.1em; color: #000;}
#content h3      {padding-left: 5px; _padding-top: 20px; padding-bottom: 0; font-size: 0.95em;  color: #000;}
#content p       {padding-left: 5px; _padding-top: 20px; padding-bottom: 0; font-size: 100%;  color: #000;}
nav, footer     {display: none;}

a               {font-weight: normal; padding: 3px 3px; color: #000;}

.noprint       {display: none;}

.box {float: none;} /* 2-spaltig - Kontaktformular & Kontaktdaten + breadcrumb & Suche */
.wrapper   {display: none;}
#content-slider  {display: none;}
#content-slider2 {display: none;}


#boxen3 div {flex: 1; min-width: 400px; padding: .5em;}


img {display: none;}

.boxen-style2, .boxen-style3, .boxen-style {
background: transparent; border: 0 solid #2a2d31; margin-right: .7em; margin-bottom: .7em; border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}

#ssearch, #breadcrumb {display: none;}

}
/* *****************************************************************PRINT ENDE  *************************************************************************** */