/* ******** Anpassung des Erscheinungsbildes mit dem Template CASSIOPEIA ******** */

 :root {
  --text-dunkelrot: #6e0818;
  --border-weinrot: #922f3e;
  --backgrnd-ltred: #e7e2e2;
  --backgrnd-table: #dcd4d4;
  } 


/* Testbereiche werden später einsortiert */
div.icons div.float-end div { margin-top: -42px; }

/* Der Link zum Bearbeiten im Frontend soll nach oben verschoben werden */

body.contentpane.component div.com-content-article.item-page.BG-Schattenlogo div.com-content-article__body div table.design tbody tr td a.btn.btn-primary { display: none; }


body.site.com_users.wrapper-static.view-reset.no-layout.no-task div.site-grid div.grid-child.container-component main div.com-users-reset.reset,
body.site.com_users.wrapper-static.view-remind.no-layout.no-task div.site-grid div.grid-child.container-component main div.com-users-remind.remind,
body.site.com_users.wrapper-static.view-login.no-layout.no-task div.site-grid div.grid-child.container-component main div.com-users-login.login,
body.site.error_site.wrapper-static.view-.no-layout.no-task div.site-grid div.grid-child.container-component div.card,
form#contact-form.form-validate.form-horizontal.well fieldset.m-0:first-child {
  border: var(--text-dunkelrot) solid 2px;
  border-radius: 12px;
  padding: 8px 22px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  max-width: 90%;
 }
body.site.error_site.wrapper-static.view-.no-layout.no-task div.site-grid div.grid-child.container-component div.card {
  margin-bottom: 42px;
}
@media (width >= 580px) {
body.site.error_site.wrapper-static.view-.no-layout.no-task div.site-grid div.grid-child.container-component div.card {
  background-image: url(/images/icons/sadsmiley-l.svg);
   background-repeat: no-repeat;
   background-position: 95% 22px;
   background-size: 64px;
  }
}
@media (width >= 768px) {
body.site.error_site.wrapper-static.view-.no-layout.no-task div.site-grid div.grid-child.container-component div.card {
   background-position: 90% 32px;
   background-size: 96px;
  }
}
body.site.com_users.wrapper-static.view-login.no-layout.no-task div.site-grid div.grid-child.container-component main div.com-users-login.login {
 max-width: 640px;
  margin-bottom: 42px;
}

div.round-border-left p b { font-size: 1.5rem; }

@keyframes Einblendung {
	0% {
		transform: scale(0.1);
		opacity: 0;
	}
	64% {
		transform: scale(0.1);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

div.WoWoBtn {
  animation: Einblendung 8s;
  text-align: center;
  margin: -5em 10% 2.5em 10%;
  line-height: 2.8em; 
  position: relative;
  z-index: 12;
 }
div.WoWoBtn > a {
  text-decoration: none;
  font-weight: 600;
  padding: .3em .8em;
  margin: .2em;
  color: white;
  background-color: var(--text-dunkelrot);
  border: solid 3px white;
  border-radius: 7px;
  box-shadow: 2px 2px 5px #000;
}
div.WoWoBtn > a:hover { 
  color: #fff;
  background-color: var(--border-weinrot);
  background-image: radial-gradient(#f75, #e50, #e00);
  box-shadow: 4px 4px 7px #000;
  padding: .5em 1em;
  margin: 0;
 }

body.site.error_site.wrapper-static.view-.no-layout.no-task div.site-grid div.grid-child.container-component div.card div.card-body main p a.btn.btn-secondary,
a.btn.btn-sm.btn-secondary.next,
a.btn.btn-sm.btn-secondary.previous {
  display: inline-block;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 12px 28px, rgba(0, 0, 0, 0.52) 0px 12px 10px !important;
  color: white;
  background-color: #720d1d;
  border: solid 2px #ffffff;
  padding: 3px 9px;
  border-radius: 5px;
}
a.btn.btn-sm.btn-secondary.next:hover,
a.btn.btn-sm.btn-secondary.previous:hover {
  color: red;
  background-color: #e7e2e2;
  border-color: red;
}

.Ablaufdiagramm {
  position: relative;
  height: 770px;
  width: 80%;
  margin-left: 8%;
  /* border: dotted 1px blue; */
  /* Testmuser zur Pixelmessung
  background-color: transparent; /* For browsers that do not support gradients */
  /*
  background-image: repeating-linear-gradient(0deg, red 0px, red 1px, yellow 1px, yellow 25px, green 25px, green 26px, transparent 26px, transparent 50px);
  */
}

.round-border-left, .round-border-right,
.round-border {
  width: 42%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid black;
  border-radius: 9px;
  background-color: grey;
  padding: 7px;
  z-index: 7;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.round-border-left p, .round-border-right p,
.round-border p {
  text-align: center;
  font-weight: bolder;
  margin: 0;
}
.round-border-left {
  height: 150px;
  position: absolute; 
  left: 5%;
}
.round-border-right {
  height: 120px;
  position: absolute; 
  left: 52%;
}


@media (width <= 720px) {
  .round-border-left, .round-border-right,
  .round-border {
    font-size: 0.8em;
 }
  .Ablaufdiagramm {
    width: 100%;
    margin-left: 0
 }

}

.Trapez-1 { 
  left: 42%;
  width: 11%;
  height: 220px !important;
  position: absolute;
  z-index: 1;
}

table.mark-dotted tbody tr td {
  border-color: red; 
  border-style: dotted; 
  border-width: 1px;
 }

 /* div.com-content-article__body div.box-grid-4-1 > div {
	display: flex;
	flex-direction: column;
	align-items:center;
} */

.wf-icon-zoom-image > svg {
  fill: var(--text-dunkelrot) !important;
  }

.container-header nav { margin: 0 !important; }

.float-none {
  font-family: 'Book Antiqua', georgia, palatino, times, serif;
}

/* ********[ Farbige Boxen mit Icons ]********************************* */
.Border-Col00 { 
  border: solid 5px #f1ec00 !important;
  background-color: #ffffcc;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-style: ridge !important;
  position: relative;
  padding: 5px; margin: auto; margin-top: 42px;bottom: -28px !important;
  left: -20px !important;
  width:62%;
  font-size: 14px;
 }

div.com-content-article__body div.box-grid-4-1 {
   display: flex;
   margin: 2em 0;
 } 

   .Border-Col01 { 
     border: solid 5px #00b0f0 !important;
     background-color: #c1e5f5;
     }
   .Border-Col02 { 
     border: solid 5px #93d053 !important;
     background-color: #d9f2d0;
     }
   .Border-Col03 { 
     border: solid 5px #ffc107 !important;
     background-color: #fbe3d6;
     }
   .Border-Col04 { 
     border: solid 5px #a23096 !important;
     background-color: #f2cfee;
     }

.Border-Col01, .Border-Col02, .Border-Col03, .Border-Col04 {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-style: ridge !important;
   padding: 9px; 
   margin: 42px 17px 0 0;
   position: relative;
   font-size: 14px;
   width: 23%;
   float: right;
 }

.IconPos3i {
   width: auto;
   max-height: 64px;
   float: right;
 }
.IconPos3o {
   width: auto;
   max-height: 64px;
   float: right;
   position: absolute !important;
   bottom: -28px !important;
   right: -26px !important;
 }
.IconPos8 {
   width: auto;
   max-height: 64px;
   float: right;
   position: absolute !important;
   top: -48px !important;
   left: 48% !important;
  }
.IconPos9 { 
   width: auto;
   max-height: 64px;
   float: right;
   position: absolute !important;
   top: -35px !important;
   right: -22px !important;     
 }

.IconPos9o {
   width: auto;
   max-height: 64px;
   float: right;
 }

.IconPos9i {
   width: auto;
   max-height: 80px;
   position: absolute !important;
   top: -42px !important;
   right: 2px;
 }

@media (width <= 880px) {
  div.com-content-article__body div.box-grid-4-1 {
     flex-direction: column; 
   }
  .Border-Col00, .Border-Col01, .Border-Col02, .Border-Col03, .Border-Col04  { 
      left: unset !important;
      width: 75%;
      margin-left: 11%;
    } 
  .IconPos3o {
      float: left;
      position: absolute !important;
      bottom: -28px !important;
      left: -20px !important;
    }
 }
/* ******************************************************* */

pre {
  padding: 7px;
  background-color: #dacbcd;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 9px !important;
  margin: 7px 30px;
 }

/*
.container-header .metismenu > li:after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
*/


div.grid-child.container-nav div.container-search form.mod-finder.js-finder-searchform.form-search div.mod-finder__search.input-group div.awesomplete input#mod-finder-searchword111.js-finder-search-query.form-control {
  padding: .5rem .5rem;
  font-size: .75rem;
 }

header.header.container-header.full-width div.grid-child.container-nav div.container-search form.mod-finder.js-finder-searchform.form-search div.mod-finder__search.input-group button.btn.btn-primary {
width: 0;
 }

.awesomplete > input {
  max-width: 132px;
  padding: 0.42em;
}

/* leider funktioniert das noch nicht
  --font-family-serif: 'Book Antiqua', georgia, palatino, times, serif;
  --font-family-sans: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --font-size-article: 18px;
*/

.serif, div.com-content-article__body > p,
 div.com-content-article__body > ul > li, 
 div.com-content-article__body > div {
  font-family: 'Book Antiqua', georgia, palatino, times, serif; 
}
/* h2, h3, h4, h5, h6 { font-family: 'Book Antiqua', georgia, palatino, times, serif; } */

.col-serif-durt {
  font-family: 'Book Antiqua', georgia, palatino, times, serif; 
  color: var(--text-dunkelrot);
}

/* ================ Seitenuntermenü ================ */
.card {
  div.card-body h3 { font-size: 1em; }
  div.card-body li { font-size: 0.8em; padding-bottom: 0.42rem;}
  div.card-body { line-height: 0.9; }
  --card-spacer-y: .5rem;
  --card-spacer-x: .5rem;
}

 @media (width >= 1080px) {
  .card { 
    div.card-body h3 { font-size: 1.5em !important; }
    div.card-body li { font-size: 1.2em !important; }
    div.card-body { line-height: 1 !important; }
    --card-spacer-y: 1rem;
    --card-spacer-x: 1rem;
  }
}
 @media (width <= 750px) {
  .card {
    div.card-body h3 { font-size: 1em; !important; }
    div.card-body li { font-size: 0.9em; !important; }
    div.card-body { line-height: 0.9 !important; }
    --card-spacer-y: 0.35rem;
    --card-spacer-x: 0.35rem;
  }
}


/* ================ Site-Kopfzeile und Artikelanpassungen ================ */
.brand-logo > img {
  float: left;
  margin-left: 9px;
  box-shadow: 2px 2px 5px #000;
 }

/* ================ Style-Einstellungen für Header und Footer ================ */


.container-header .grid-child {
  padding: .5em 0 !important;
}


.container-header .site-description {
    color: #fff;
    white-space: normal;
    font-family: 'Book Antiqua', georgia, palatino, times, serif;
    font-size: 1.8rem;
    text-align: center;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 5px #000;
    /* border dotted red 1px; */
  }
.container-header .metismenu > li > a, 
.container-footer .nav > li > a {
  display: inline-block;
  background-color: #720d1d;
  border: solid 2px #ffffff;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  text-transform: uppercase !important;
  font-size: 1.1em;
    
  }
.container-header .metismenu > li > a::after {
    height: 0;
  }

.container-header .mod-menu > li {
  position: relative;
 }

/* .container-header .mod-menu > li + li {
    margin-left: 1em;
  } */

/* ================ Listen Elementabstand unten ================ */
div.com-content-article__body ol li,
div.com-content-article__body ul li {
  margin-bottom: 0.32rem !important;
}


/* ================ Groessenanpassungen Header und Footer ================ */

/* @media (width >= 1080px) {
   body.itemid-122  .container-header .grid-child:first-child {
    background: url('/images/qrcode-intern.png') no-repeat right bottom;
   } 
 } */

/* Anpassungen an unterschiedliche Displaybreiten */
@media (width >= 650px) {
  .container-header .site-description {
    font-size: 2rem;
  }
}

@media (width >= 888px) {
  .container-header .site-description {
    font-size: 2.7rem;
  }
}

/* Seiten-Untermenü einklapbar machen */
/* @media (width < 880px) {
   div.card-body  ul.nav.flex-column {
        display:flex;
        flex: 1 1 0%;
        flex-direction: row
     background-color: red;
    }
} */



/* ******** Menüanpassungen ******** */

.mod-menu {
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 0.1em;
  max-width: max-content;
 }

.current > a {
  text-decoration: none !important;
  background-color: red;
  background-image: radial-gradient(#f75, #e50, #e00);
  box-shadow: #fff5 0px 0px 32px;
}
.mod-list li.active > a {
  text-decoration: none !important;
}



/* ******** Zweites Menü im Fußbereich ******** */
/* 
   ul.mod-menu.mod-list.nav a { background-color: green; }
*/
.container-footer .mod-menu > li {
  margin-right: 1em;
}
.footer .mod-menu {
  position: relative;
  flex-direction: row;
  flex: 1;
  display: flex;
  font-size: 1rem;
  }

.footer, .container-footer .footer .full-width {
  padding: 12px;
  margin-top: 0;
}

.footer .grid-child {
  padding: 0;
}

.mod-list li a:hover {
  text-decoration: none;
}

.container-footer nav {
  margin-top: .5em;
  padding: 0;
}

.container-footer .container-nav {
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 1em;
}

.container-footer .mod-menu > li > a{
  position: relative;
  border: solid 2px white;
  padding: 1px 9px;
  border-radius: 5px;
  text-transform: uppercase !important;
 }

.container-footer .mod-menu > li > a:hover {
  border-color: #fc7;
  text-decoration: none;
 }


.metismenu.mod-menu .metismenu-item {
  background-color: transparent !important;
  padding: .5em 0.75em;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.5;
}

.container-footer .mod-menu > li > a {
  line-height: 1.8;
}

.metismenu.mod-menu .metismenu-item > li > a,
.container-footer .mod-menu > li > a {
  font-weight: bold;
  }
  
.container-header .mod-menu > li > a:hover,
.container-footer .mod-menu > li > a:hover {
  border-color: #fc7;
  background-color: #a34;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.container-search { padding: 0 0.42em; }

.container-header .navbar-toggler {
  color: #fff;
  border: 2px solid #fff;
  margin: 7px;
}

/* ******** Menüanpassungen für unterschiedliche Bildschirmgrößen ******** */

@media (width >= 1200px) {
  .metismenu.mod-menu .metismenu-item {
    padding: .5em 1em;
    font-size: 0.85rem;
  }
  .metismenu .mod-menu > li + li {
    margin-left: 1.rem;
    font-size: 1rem;
  }
  .container-footer > .grid-child {
    flex-basis: auto;
    display: flex !important;
  }  
}

@media (width >= 992px) {
   .metismenu.mod-menu .metismenu-item {
     padding: .5em 0.42em;
  }
}

@media (width > 992px) {
  .container-search {
    display: none; 
  }

}

@media (width >= 1120px) {
  .container-search {
    display: block;
  }
}

/* ******** Standart Schriftart für Artikel im Frontend einstellen ******** */

.com-content-article__body {
  font-family: 'Book Antiqua', georgia, palatino, times, serif; !important;
  font-size: 18px !important;
}
legend {
  font-family: 'Book Antiqua', georgia, palatino, times, serif; !important;
 }


/* ******** Überschriften ******** */

.page-header h1 {
  text-shadow: 0 0 8px #ffffff;
}

/* ******** Textausformungen ******** */

.kleiner { font-size: smaller; }

/* 
div.com-content-article__body > h2,  div.com-content-article__body > h3,  div.com-content-article__body > h4,  div.com-content-article__body > h5,  div.site-grit p, div.site-grit div, div.site-grit span {
  font-family: 'book antiqua', palatino, serif;
  font-weight: bold;
}
*/



/*  --breakpoint-md:888px; */

/* ******** Tabellen für Kostenaufstellungen mit Rahmen und punktierten Zeilen ********* */

table.Preisliste {
   border: solid 1px var(--border-weinrot);
   background-color: var(--backgrnd-table);
   border-collapse: collapse;
   width: max-content;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom:1em;
 }
table.Preisliste > tbody:first-child {
   width: 85%;
 }
table.Preisliste > tbody:last-child {
   width: 15%;
 }
table.Preisliste > tbody > tr {
   border: dotted 1px var(--border-weinrot);
   padding:5px;
 }
table.Preisliste > tbody > tr > th:first-child {
  text-align: left;
  padding: 0 8px;
  border-bottom: solid 1px var(--border-weinrot);
 }
table.Preisliste > tbody > tr > th:last-child {
  text-align: right;
  padding: 0 32px;
  border-bottom: solid 1px var(--border-weinrot);
 }
table.Preisliste > tbody > tr > td:first-child {
  text-align: left;
  padding: 0 8px;
 }
table.Preisliste > tbody > tr > td:last-child {
  text-align: right;
  padding: 0 18px;
 }
@media (width <= 700px) { table.Preisliste { width: auto; } }

/* ********* Einfache Tabellen mit und ohne Rahmen, Cellenausrichtung oben ********* */
table.Tabelle-mit-Border {
   border: solid 1px var(--border-weinrot);
   background-color: var(--backgrnd-table);
   border-collapse: collapse;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom:1em;
 }
table.Tabelle-mit-Border > tbody > tr > th {
  font-weight: bold;
  border: 1px solid var(--border-weinrot);
  background-color: var(--backgrnd-table);
  padding: 2px 9px;
  vertical-align: top;
 }
table.Tabelle-mit-Border > tbody > tr > td {
  border: 1px solid var(--border-weinrot);
 }

table.Tabelle-ohne-Border {
   background-color: var(--backgrnd-table);
   border-collapse: collapse;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 9px !important;
   margin: 3px 0 1em 0;
 }
table.Tabelle-ohne-Border > tbody {
}
table.Tabelle-ohne-Border > tbody > tr > th {
  font-weight: bold;
  border: none;
  background-color: var(--backgrnd-table);
  padding: 2px 9px;
  vertical-align: top;
 }
table.Tabelle-ohne-Border > tbody > tr > td {
  border: none;
 }

table.Tabelle-mit-Border > tbody > tr > td, table.Tabelle-ohne-Border> tbody > tr > td {
  vertical-align: top;
  padding: 2px 9px;
}
table.Tabelle-mit-Border > tbody > tr > td:fist-child, table.Tabelle-ohne-Border> tbody > tr > td:fist-child {
  horizontal-align: center;
}

/* ------------------------------------- */

/* ******** Bild im Artikel mit Schatten darstellen ******** */
div.com-contact__thumbnail.thumbnail > img {
  margin: 0 0 16px 16px;
  width: 200px;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  border: solid 7px white !important;
 }

.pic-shadow, p > .float-end, span > .float-end { 
  margin-left: 16px; margin-bottom: 16px;
  width: 220px;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  border: solid 7px white !important;
 }
.pic-shadow, p > .float-start, span > .float-start { 
  margin-right: 16px; margin-bottom: 16px;
  width: 220px;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  border: solid 7px white !important;
 }
@media (width >= 960px) {
   .pic-shadow, p > .float-end, span > .float-end { 
     width: 280px;
     height: auto;
     box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 28px, rgba(0, 0, 0, 0.22) 0px 12px 10px;
     border: solid 5px white !important;
    }
   .pic-shadow, p > .float-start, span > .float-start { 
     width: 280px;
     height: auto;
     box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 28px, rgba(0, 0, 0, 0.22) 0px 12px 10px;
     border: solid 5px white !important;
    }
 }
@media (width <= 720px) {
   .pic-shadow, p > .float-end, span > .float-end { 
     width: 128px;
     height: auto;
     box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 28px, rgba(0, 0, 0, 0.22) 0px 12px 10px;
     border: solid 5px white !important;
    }
   .pic-shadow, p > .float-start, span > .float-start { 
     width: 128px;
     height: auto;
     box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 28px, rgba(0, 0, 0, 0.22) 0px 12px 10px;
     border: solid 5px white !important;
    }
 }

@media (width >= 880px) {
  .com-contact__container .com-contact__thumbnail {
    text-align: right;
    float: right;
    margin-right: 10%;
  }
}

/* ******** Edit-Button für Module im Frontend ******** */
  .btn.jmodedit {
    top: -50px;
 }

/* ******** Unterdrücken der Themen-Navigation "weiter" "zurück" bei großem Bildschirm ******** */
@media (width >= 992px) {
  .pagenavigation {
    display: none;
   }
}

/* .card-body {
  z-index: 10;
  background-color: var(--cassiopeia-color-primary);
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary)0%,var(--cassiopeia-color-hover)100%);
  position: relative;
  box-shadow: inset 0 5px 5px #00000008;
  padding: 12px; 5%;
  /* border: dotted red 2px; */
} */

container-footer .mod-list li a:hover {
  text-decoration: none;
}




/* Unterseitenmenu und dazugehörige Buttons*/

.article-index, .page-link {
  background-color: var(--backgrnd-ltred);
  border-radius: 5px;
  border: solid 2px var(--border-weinrot);
  font-size: 0.75em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

 .page-link {
   margin: 0 5px;
   font-family: var(--body-font-family);
   text-transform: uppercase !important;
 }
.page-link:hover {
  border-radius: 5px;
  border: solid 2px var(--border-weinrot);
 }

.pagenavcounter {
  background-color: var(--backgrnd-ltred);
  font-family: var(--body-font-family);
  font-size: 0.75em;
  padding: 3px 7px 0 7px;
  margin-bottom: 12px;
  width: max-content;
  border-radius: 3px;
  border: solid 1px var(--border-weinrot);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

a.www {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #7777ff;
  padding-left: 16px;
  padding-right: 3px;
  background: url(/images/link_extern.gif) 0px 2px no-repeat;
}
a.intern {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #7777ff;
  padding-left: 16px;
  padding-right: 3px;
  background: url(/images/link_intern.gif) 0px 2px no-repeat;
}


/* ******** Textanimation in der Welcome-Seite ******** */
.animation {
  font-family: 'Book Antiqua', georgia, palatino, times, serif;
  color: var(--text-dunkelrot);
  font-size: 1em;
  font-weight: bold;
  line-height: 110%;
  text-shadow: 0 0 5px #ffffff;
  text-align: center;
  display: block;
  width: 100%;
  height: 280px;
  overflow: hidden; 
  position: relative;
  z-index: 8;
  /* border: dotted 2px red; */
}

.t0, .t1, .t2, .t3
 {
	position: absolute;
	width: 100%;
    text-align: center;
	animation-name: tmoveup;
	animation-timing-function: cubic-bezier(.24,-1.27,.56,1.2); 
	z-index: 8;
 }
 
.t0 { animation-duration: 3s; top: 5px; }
.t1 { animation-duration: 4s; top: 30px; }
.t2 { animation-duration: 5s; top: 55px; }
.t3 { animation-duration: 6s; top: 80px; }

@keyframes tmoveup
 {
	from { transform: translateY(250px)  scale(0.5); opacity: 0; }
	to { transform: translateY(0px)  scale(1); opacity: 1; }
 }

@media (width >= 700px) {
  .animation {
    font-size: 1.3em;
    display: flex;
    height: 300px;
  }
  .t0 { animation-duration: 3s; top: 5px; }
  .t1 { animation-duration: 4s; top: 40px; }
  .t2 { animation-duration: 5s; top: 75px; }
  .t3 { animation-duration: 6s; top: 110px; }
 }

@media (width >= 880px) {
  .animation {
    font-size: 1.8em;
    text-shadow: 0 0 8px #ffffff;
  	display: flex;
	height: 360px;
  }
}

@media (width >= 1024px) {
  .animation {
    font-size: 2em;
    text-shadow: 0 0 8px #ffffff;
  	display: flex;
	height: 480px;
  }
  .t0 { animation-duration: 3s; top: 5px; }
  .t1 { animation-duration: 4s; top: 50px; }
  .t2 { animation-duration: 5s; top: 95px; }
  .t3 { animation-duration: 6s; top: 140px; }
}


/* Eine Zeitleiste nach einem Beispiel von SelfHTML:
  https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS_Zeitstrahl.html */

body.itemid-122 div.main {
	padding: 18px;
	spacing: 15px;
}

#zeitleiste {
    list-style-image: none;
	list-style-type: none;
	position: relative;
	margin-left: 8em;
    overflow: visible;
}

#zeitleiste::before {
	position: absolute;
	content: "";
	bottom: 0;
	left: -2px;
	top: 0;
	background: var(--border-weinrot);
	width: 4px;
}

#zeitleiste::after {
	position: absolute;
	content: "";
	bottom: -1.3em;
	left: -0.73em;
	width: 0;
	height: 0;
	border-width: .75em;
	border-style: solid;
	border-color: var(--border-weinrot) transparent transparent transparent;
}

#zeitleiste > li::before {
	position: absolute;
	content: "";
	width: 1em;
	height: 1em;
	left: -0.5em;
    margin-top: 0.4em;
	border-radius: 50%;
	border: 0.2em solid var(--border-weinrot);
	background: gold;
}

#zeitleiste > li {
	margin-bottom: 0.75em;
}

#zeitleiste > li > h5 {
	margin: -1em 0 0.2em;
}

#zeitleiste > li > time {
	display: block;
	font-weight: bold;
	margin-left: -10em;
	width: 6.5em;
	text-align: right;
}

/* ============================== */

/* Aufzählungszeichen als Grafik */
ul {
    list-style-image:url(/images/Beitraege/ul-dot_10.png);
}

/* Info-Stempel schräg  in rot */
.redstamp, RedStamp, Red-Stamp {
  border: 2px solid red !important;
  background-color: #fda;
  color: red;
  opacity: 0.9;
  border-radius: 7px;
  padding: 7px;
  box-sizing: border-box;
  position: relative;
  float: right;
  right: 12%;
  text-align: center;
  max-width: 420px;
  transform: rotate(20deg);
}

.pic-right30 {
 float: right;
  margin-right: 33%;
}.pic-right20 {
 float: right;
  margin-right: 20%;
}
@media (width <= 920px) {
  .pic-right30 {
    margin-right: 0;
    width:127px;
    height:auto;
   }
  .pic-right20 {
    margin-right: 0;
    width:127px;
    height:auto;
  }
}

/* ======== Einstellungen für schmale Bildschirme ======== */

@media (width < 880px) {
  h1, .h1 { font-size: calc(1.2rem + 1.5vw); }
  h2, .h2 { font-size: calc(1.1rem + .9vw); }
  h3, .h3 { font-size: calc(1rem + .6vw); }
  h4, .h4 { font-size: calc(0.95rem + .3vw); }
  h5, .h5 { font-size: 0.95rem; }
  h6, .h6 { font-size: 0.9rem; }  
}

/* ======================================================= */

.contact-fax { text-decoration-line: line-through; }
.sans { font-family: var(--cassiopeia-font-family-body); }


/* ======================================================= */

.redstamp a { font-size: 13px; line-height: 17px; }
.redstamp:hover { opacity: 0.25; }

/* Seitenhintergründe im Menüpunkt "Seitenanzeige" --> "CSS-Klasse Seite" definieren */
body.site.com_content.wrapper-static.view-article.no-layout.no-task.itemid-103,
body.BG-PSY-COxx, .BG-Psy-Co {
   background-image:  linear-gradient(rgba(241, 246, 247, 0.3), rgba(255, 255, 255, 0.3)), url(/images/background/Logo_Sommer_lang.png);
   background-repeat: repeat-y;
   background-position: center center;
   background-size: 100%;
   /* background-origin: site-grid; */
}
/* ******** blasserer Hintergrund bei kleiner Auflösung ******** */
@media (width < 880px) {
  body.site.com_content.wrapper-static.view-article.no-layout.no-task.itemid-103, 
  body.BG-PSY-COxx, .BG-Psy-Co {
     background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.8)), url(/images/background/Logo_Sommer_lang.png);
     background-repeat: repeat-y;
     background-position: center center;
     background-size: 100%;
     /* background-origin: site-grid; */
   }
 }

body.BG-Paper {
   background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url(/images/background/badpaper.gif);
   background-position: center center;
   background-size: 320px;
}

body.BG-Schattenlogo {
   background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(/images/background/Logo_bordeaux_1_bearbeitet.jpg);
   background-position: center center;
   background-size: 100%;
}

/* Entwicklung für das neue Hintergrundbild mit den Teilkreisen rechts https://www.mediaevent.de/css/gradient.html */
.BG-weinrot-weiss {
  background: linear-gradient( 
    to left,  
    #fefcfe 6%,
    #c0a8a9 90%, 
    #b7868c 97.5% );
 }

/* ******** Wegen einem Fehler im CMS muss BODY vorangestellt werden ******** */
body.site.com_users.wrapper-static.view-login.no-layout.no-task,
body.site.com_users.wrapper-static.view-profile.no-layout.no-task,
body.site.com_users.wrapper-static.view-profile.layout-edit.no-task,
body.site.error_site.wrapper-static.view-.no-layout.no-task,
body.BG-WeinrotTeilkreise, .BG-Weinrot-Teilkreise {
   background: url(/images/background/BG-Teilkreise_rechts.png) repeat-y right top, 
   linear-gradient( to left, #fefcfe 6%, #c0a8a9 90%, #b7868c 97.5% );
   background-size: 100%;
 }
/* ******** Wegen einem Fehler im CMS muss BODY vorangestellt werden ******** */
body.BG-WeinrotBuchblatt, .BG-Weinrot-Buchblatt {
   background: url(/images/background/BG-Teilkreise_rechts.png) repeat-y right center, 
   linear-gradient( to left, #fefcfe 24%, #c0a8a9 70%, #b7868c 80%, #b7868c 90%,  #b7868c 95%, #c0a8a9 99.9%);
   background-size: 100%;
 }

/* .BG-Teilkreise, .itemid-122 .site-grid {
  background-image: url(/images/background/BG-Teilkreise_rechts.png);
  background-repeat: repeat-y;
  background-position: right center;
  background-size: 12.5%;
} */

/* 8 Testbildfarben nach Farbfolge RGB = R:11001100 G:11110000 B:10101010 */
.BG-Farbverlauf {
  background: linear-gradient( 
    to left, 
    #000 6.25%, 
    #00F 18.75%, 
    #F00 31.25%, 
    #F0F 43.75%, 
    #0F0 56.25%, 
    #0FF 68.75%, 
    #FF0 81.25%, 
    #FFF 93.75% );
 }

.BG-Testbild {
    background: linear-gradient(
    to left,
    #000 12.5%,
    #00F 12.5% 25%,
    #F00 25%   37.5%,
    #F0F 37.5% 50%,
    #0F0 50%   62.5%,
    #0FF 62.5% 75%,
    #FF0 75%   87.5%,
    #FFF 87.5%
  );
}

.BG-Warnmarkierung {
    background-image: repeating-linear-gradient(45deg, yellow 0%, yellow 2%, black 2%, black 4%, yellow 4%);
 }

/* ******** Nur ab einer gewissen Größe darstellen ******** */
@media (width >= 1414px) {
  .BG-Ringbuch {
    background: url(/images/background/Spiralblock.png);
    background-repeat: repeat-y;
     background-position: left;
  } 
}

@media print { 
  header, .footer, .footer * {
    display: none !important;
  }
}

/* Styles für Offline-Seite setzen */
.com_login .sidebar-wrapper .main-brand h1 {
  font-weight: 550;
  font-size: 1.8rem;
}
.logo-icon { display: none; }
.outer {
   background: url(/images/background/BG-Teilkreise_rechts.png) repeat-y right top, 
   linear-gradient( to left, #fefcfe 6%, #c0a8a9 90%, #b7868c 97.5% );
   background-size: 100%;
}
/* ******** end of file ******** */