/* https://colours.joomla.com */
/* Chrome-Tasten: mobil/inspector: F12; in user.css suchen: STRG+F */

/* new color variables */
        :root {
            --dark-color: #1B2739;
            --light-color:#00ff00; /*#FCFDFF;*/
            --main-background: #FFFFFF; /*#DDDDDD;*/ /*#E8EFF6;*/
            --primary-background: #41648C;
	        --primary-textColor: #FCFDFF;
            --secondary-background: #FFFFFF; /*#DDDDDD;*/ /*#00AFB9;*/
            --secondary-textColor: #FCFDFF;
            --accent-background: #F07167;
            --accent-textColor: #F07167;*/
            --primary-gradient: /*linear-gradient(180deg, #6894CA, #283E57);*/
            --secondary-gradient: /*linear-gradient(180deg, #283E57, #6894CA);*/ /*linear-gradient(180deg, #00AFB9, #006a70);*/
        }
        body {
            background: var(--main-background); 		/* background of your website */
            color: var(--main-color); 		/* color of your website */
        }

        a {
            color: var(--secondary-background); /* color of your links */
        }

        .container-header {
            background-color: var(--primary-background); /* Solid background of your header */
            background-image: var(--primary-gradient);  /* Set to none if you want to disable the gradient */
        }

        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
			border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
        }

        .btn.btn-primary {
            background-color: var(--primary-background); /* background of your primary buttons */
            border-color: var(--primary-background); /* border color of your primary buttons */
            color: var(--light-color); /* text color of your primary buttons */
        }

        .mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
            background-color: var(--accent-background); /* background of your primary buttons */
            border-color: var(--accent-background); /* border color of your primary buttons */
            color: var(--dark-color); /* text color of your primary buttons */
        }

        .btn.btn-secondary {
            background-color: var(--secondary-background); /* background of your secondary buttons */
            border-color: var(--secondary-background); /* border color of your secondary buttons */
            color: var(--secondary-color); /* text color of your secondary buttons */
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of your cards */
	        border-radius: 0; /* border radius of your cards */
	        background-color: var(--primary-background); /* background color of your cards */
        }

        .card-header {
            background-color: var(--primary-background); /* background color of your card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
            color: var(--primary-textColor); /* text color of your card headers */
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
            color: var(--primary-textColor); /* text color of your card bodies */
        }

        .card-body a {
            color: var(--primary-textColor); /* text color of your card body links */
        }

        .card.secondary {
            border: 1px solid var(--secondary-background); /* border color of your secondary cards */
            border-radius: 0; /* border radius of your secondary cards */
            background-color: var(--secondary-background); /* background color of your secondary cards */
        }

        .card-header.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card headers */
            border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
            color: var(--secondary-textColor); /* text color of your card headers */
        }

        .card-body.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
            color: var(--secondary-textColor); /* text color of your secondary card bodies */
        }

        .card-body.secondary a {
            color: var(--secondary-textColor); /* text color of your secondary card body links */
        }

        .plg_system_webauthn_login_button svg {
            fill: var(--primary-color); /* color of your webauthn login button icon */
        }

        .footer {
            background-color: var(--secondary-background); /* background color of your footer */
            background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
            color: var(--secondary-color); /* text color of your footer */
        }

        ::selection {
	        background-color: var(--accent-background); /* background color of your text selection */
			color: var(--dark-color); /* text color of your text selection */
        }

        .metismenu.mod-menu .metismenu-item > ul {
			background-color: var(--secondary-background); /* background color of your dropdown menu */
			border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
	        color: var(--secondary-color); /* text color of your dropdown menu */
		}

        .metismenu.mod-menu .metismenu-item > ul a {
	        color: var(--secondary-color); /* text color of your dropdown menu links */
        }

        .main-top.card.colorpicker-module {
	        background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
	        color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: none;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
        }

        .article-info {
	        background-color: var(--main-background); /* background color of your article info */
	        padding: 15px 20px; /* padding of your article info */
        }

        .article-info dd {
	        color: var(--main-color); /* text color of your article info */
		}

        .btn.btn-info {
	        background-color: var(--primary-background); /* background color of your info buttons */
            border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
	        color: var(--primary-color); /* text color of your info buttons */
        }

        .btn-primary .icon-white:before {
	        color: var(--primary-textColor); /* text color of your info buttons in primary */
        }

        .btn-secondary .icon-white:before {
            color: var(--secondary-textColor); /* text color of your info buttons in primary */
        }

        .form-control {
	        background-color: var(--main-background); /* background color of your form controls */
	        border: 1px solid var(--main-color); /* border color of your form controls */
	        color: var(--primary-color); /* text color of your form controls */
	        border-radius: 0; /* border radius of your form controls */
        }

        label {
	        font-weight: bold; /* font weight of your labels */
        }

        /* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
		h1, .h1 {
			font-size: clamp(18px, 5vw, 28px);
		}

		/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
		h2, .h2 {
			font-size: clamp(16px, 5vw, 26px);
		}

		/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
		h3, .h3 {
			font-size: clamp(14px, 5vw, 24px);
		}

		/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
		h4, .h4 {
			font-size: clamp(12px, 5vw, 22px);
		}

/* ##################### Overrides ##################### */
h1 {
   font-weight: normal;
   /*line-height: 0.8;*/
  line-height: 1.3;
   margin: 0;
  }
          
          /*href-Link*/
a {
  	color: #eeeeee;
}

a:focus, a:hover {
 	color: #bbbbbb;
}

.footer .grid-child {
  	padding: 0.5em;
} 

/*Hamburger Menu*/
.container-header .navbar-toggler {
 	color: #0088cc;
 	border: 1px solid #0088cc;
  	margin: 10px;
}

/*Menü*/
 /*komplette navbar*/
.container-header .container-nav { 
	background-color: #DDDDDD; /*#666666;*/
	/*background-color: rgba(128, 128, 128, 0.1);*/
	padding: 0px 0px 0px 0px;
    display: flex;
  	justify-content: center; /*right; left; horizontal; space-between/-around/-evently*/
}

/*bestückte navbar*/
.container-header .mod-menu {
	color: #0088cc;
	/*background-color: #999;*/
	/*background-color: rgba(128, 128, 128, 0.1);*/
	font-weight: bold;
	flex-wrap: wrap; /*zweizeiliges mainmenu*/
}

/*menu item idle*/
.container-header .mod-menu a {
 	-webkit-border-radius: 6px 6px 6px 6px;
 	-moz-border-radius: 6px 6px 6px 6px;
 	border-radius: 6px 6px 6px 6px;
 	padding: 3px 15px;
   	background-color: #fff; /*#555;*/
	color: #5588cc;
}

/*menu item mouse over*/
.container-header .mod-menu a:hover {
 	background-color: #bbb;
 	color: blue;
}

/*menu item mouse down*/
.container-header .mod-menu a:active {
 	background-color: #bbb;
 	/*color: yellow;*/
}

/*menu item mouse down/up*/
.container-header .mod-menu a:focus {
 	background-color: #bbb;
  	/*color: green;*/
}

/*menu item hover*/
.container-header .metismenu.mod-menu .metismenu-item>a:hover {
	/*text-decoration: underline dotted red 5px;*/
}

/*menu item chosen*/
.metismenu.mod-menu .metismenu-item.active > a {
 	background-color: #eee;
 	color: #aaa; /*#000;*/
}

/*submenu toggler (Dreieck)*/ 
.metismenu.mod-menu .mm-toggler:after {
 	background-color: none; /*yellow;/ /*#eee;*/
 	color: none; /*red;*/ /*#aaa;*/ /*#000;*/
}

/*menu item (auch Dreieck)*/
.metismenu.mod-menu .metismenu-item > button:focus {
  	outline: none; /*2px solid blue;*/
}

/*animierte Line bei hover*/
.container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.active > button::before,
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before {
  	/*background: none;*/
 	left: 15px; right: 15px; /*verkürzt die Linie*/
}

/*submenu bg*/
.metismenu.mod-menu .metismenu-item > ul {
 	-webkit-border-radius: 0px 0px 6px 6px;
 	-moz-border-radius: 0px 0px 6px 6px;
 	border-radius: 0px 0px 6px 6px;
  	border: 3px solid;
 	/*background-color: #ddd;*/
 	background-color: rgba(232, 239, 246, 0.9);
 	/*box-shadow: 0 0 0.9em rgba(0, 0, 0, 0.7);*/
}

/*submenu-item*/
.metismenu.mod-menu .metismenu-item.active>a, 
.metismenu.mod-menu .metismenu-item.active>button, 
.metismenu.mod-menu .metismenu-item>a:hover, 
.metismenu.mod-menu .metismenu-item>button:hover {
    text-decoration-line: none; /*underline;*/ /*item>a:hover*/
    text-decoration-style: initial;
    text-decoration-color: initial;
}

/*komplette side-navbar*/
.container-sidebar-left .container-nav {
	/*background-color: #fff;*/
}

/*bestückte side-navbar*/
.container-sidebar-left .mod-menu {
	/*background-color: #999;*/
}

/*Menü-Button*/
.container-sidebar-left .mod-menu a {
 	-webkit-border-radius: 6px 6px 6px 6px;
 	-moz-border-radius: 6px 6px 6px 6px;
 	border-radius: 6px 6px 6px 6px;
  	background-color: #fff;
  	padding: 5px;
}

/* menu item */
.container-sidebar-left .mod-menu a:hover {
 	background-color: #bbb;
}

/* menu item */
.container-sidebar-left .mod-menu a:focus {
 	background-color: #bbb;
}

/* menu item */
.container-sidebar-left .mod-menu a:active {
 	background-color: #eee;
}

/* ######################################### */
.container-topbar {
 	background-color: /*#61a0ef;*/ /*s.a.  .header {... */
	/*height: auto;*/
}

.container-below-top {
  	background-color: /*rgba(128, 28, 64, 0.5);*/
	/*background-color: 000000;*/
}

.container-banner {
  	/*background-image: url("/images/stories/wallpapers/bg1.jpg")");*/
  	/*height: auto;*/ /*100%;*/ /*470px;*/
  	/*background-size: cover;*/
  	/*background-attachment:fixed;*/
  	background-color: /*rgba(255, 128, 64, 0.5);*/
	/*background-color: 000000;*/
}

.container-bottom-a {  /* Modulstil: noCard */
  	background-color: #eeccbb;
}

.container-footer {
  	/*background-image: none;*/ /* default: nur image erlaubt */
  	background-color: rgba(256, 256, 256, 0.6);
	/*background-color: #596154;*/
  	height: auto; /*150px;*/
  	padding: 0px;
	margin: 0px;
  	display: flex;
  	justify-content: right; /*center;*/ /*horizontal*/
  	align-items: center; /*vertikal*/
}

.site-grid {
	/*background-color: rgba(55,255,5,0.5);*//
    /*overflow-y: scroll;*/ /*Balken sichtbar, leer*/
    /*height: 250px;*/
}

/* @Link */
a {
  	color: #000000;
}
      
.scroll-table {
 	width:100%; /* Tabellenbreite >>100% */
    /*height:400px;*/ /* Tabellenhöhe 500px */
  	/*overflow-x: scroll;*/
	/*overflow-y: scroll;*/
    overflow: auto;
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
    /*background-color: #ff00ff;*/
  }

.scroll-pan {
    width: 100%; /*930px;*/ /*1000px;*/
    overflow-x: scroll;
    /*margin-bottom: 1em;*/
    /*margin: 0px auto 1em auto;*/
    /*display: flex;*/ /* Flexbox verwenden, um das Bild zu zentrieren */
    /*justify-content: center;*/ /* Zentriert das Bild horizontal */
}

.slideshow-lokomobile {
  display: block;
  margin: 10px auto;
           }
          
/* Grid */
.grid-spalten21 {
    display: grid; 
    grid-gap: 25px;
	grid-template-columns: 2fr 1fr; 
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
  	}

.grid-spalten12 {
    display: grid; 
    grid-gap: 25px;
	grid-template-columns: 1fr 2fr; 
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
  	}

.grid-spalten11 {
    display: grid; 
    grid-gap: 25px;
	grid-template-columns: 1fr 1fr; 
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
  	}

.grid-spalten-auto {
    display: grid; 
    grid-gap: 25px;
  	grid-template-columns: auto auto;
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
  	}

.grid-spalten-ffm {
    display: grid; 
    grid-gap: 25px;
    grid-template-columns: 1fr 1fr; 
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
  	}
          
/* Klasse aus JCE existiert nur ab min-width! */
@media (min-width:  1450px) { /*1180px,844px*/
.container-seite2 {
    display: grid; 
    gap: 15px;
	/*grid-template-columns: 1fr 2fr;*/
  	grid-template-columns: auto auto;
  	} 
}

/* komplette sidebar-right existiert nur ab min-width! */
@media (min-width: 1024px) {
.grid-child.container-sidebar-right {
	position: relative;
	background: #ffff00; /*none;*/ /*Zur Entwicklungszeit sehe ich wo ich bin!*/
    }
.grid-child.container-sidebar-right > div {
  	/*position: relative; top: -75px; right: 10px; z-index: 0;*/
    /*position: fixed; top: 300px; right: 10px; z-index:10;*/
    /*position: sticky;  position: -webkit-sticky; top: 300px; right: 0px; z-index: 10;*/
    }
}
          
/* ######################################################################## */
/* ############# Background ############## */
/* über kompletten screen */

/*  INFO  */
.itemid-541 {
  	/*background-image: url("/images/stories/wallpapers/bg4.png");*/
    background-image: url("/images/stories/wallpapers/wolken1.png");
  	/*background-color: #61a0ef;*/
  	background-size: cover;
  	background-attachment: fixed;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    heigh: auto;
}
          
/*  HOME  */
.itemid-2 {
  	/*background-image: url("/images/stories/wallpapers/bg4.png");*/
    background-image: url("/images/stories/wallpapers/wolken1.png");
  	/*background-color: #61a0ef;*/
  	background-size: cover;
  	background-attachment: fixed;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    heigh: auto;
}

/*  MEDIA1  */
.itemid-4 {
   	/*background-image: url("/images/stories/wallpapers/bg1.jpg");*/
  	/*background-color: #61a0ef;*/
  	/*background-size: cover;*/
  	/*background-attachment: fixed;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* MEDIA2  */
.itemid-520 {
    /*background-image: url("/images/stories/wallpapers/bg1.jpg");*/
  	/*background-color: #61a0ef;*/
  	/*background-size: cover;*/
  	/*background-attachment: fixed;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* MEDIA3  */
.itemid-521 {
    /*background-image: url("/images/stories/wallpapers/bg1.jpg");*/
  	/*background-color: #61a0ef;*/
  	/*background-size: cover;*/
  	/*background-attachment: fixed;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* MEDIA4  */
.itemid-522 {
    /*background-image: url("/images/stories/wallpapers/bg1.jpg");*/
  	/*background-color: #61a0ef;*/
  	/*background-size: cover;*/
  	/*background-attachment: fixed;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* MEDIA5  */
.itemid-523 {
    /*background-image: url("/images/stories/wallpapers/bg1.jpg");*/
  	/*background-color: #61a0ef;*/
  	/*background-size: cover;*/
  	/*background-attachment: fixed;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* MEDIA6  */
.itemid-530 {
    /*background-image: url("/images/stories/wallpapers/bg1.jpg");*/
  	/*background-color: #61a0ef;*/
  	/*background-size: cover;*/
  	/*background-attachment: fixed;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* MEDIA7  */
.itemid-537 {
    /*background-image: url("/images/stories/wallpapers/bg1.jpg");*/
  	/*background-color: #61a0ef;*/
  	/*background-size: cover;*/
  	/*background-attachment: fixed;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* MEDIA8  */
.itemid-538 {
    /*background-image: url("/images/stories/wallpapers/bg1.jpg");*/
  	/*background-color: #61a0ef;*/
  	/*background-size: cover;*/
  	/*background-attachment: fixed;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* MEDIA9 */
.itemid-539 {
    /*background-image: url("/images/stories/wallpapers/bg1.jpg");*/
  	/*background-color: #61a0ef;*/
  	/*background-size: cover;*/
  	/*background-attachment: fixed;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* MEDIA10  */
.itemid-540 {
    /*background-image: url("/images/stories/wallpapers/bg1.jpg");*/
  	/*background-color: #61a0ef;*/
  	/*background-size: cover;*/
  	/*background-attachment: fixed;*/
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
         
/* Button=Bild in Media4, */          
.itemid-522 button {
  display: block;
  margin: 10px auto;
      }

/* Seitenklasse: Menüeintrag|Linktyp|*/
/* Achtung! Template|Colour Theme: Alternative */

.footer {

}

.slider {
  display: flex;
  align-items: flex-start;
}
          
.trennen {
	-webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
}

.trennen2 {
	-webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
    padding: 5px;
  	border: none; /*solid 1px;*/
    background-color: #dddddd;
}

.scroll {
  	height: 400px;
    margin: auto; /*0 15px 0 15px;*/
  	padding: 5px; /*0 5px 0 5px;*/
  	overflow-y: scroll;
  	border: solid 2px;
    background-color: #dddddd;
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
}

.scroll1 {
  	height: auto; 
    margin: auto; /*0 15px 0 15px;*/
  	padding: 5px; /*0 5px 0 5px;*/
  	/*overflow-y: scroll;*/
  	border: solid 3px;
    border-radius: 10px;
    /*background-color: #eeeeee;*/
    background-color: rgba(240, 240, 240, 0.6);
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
}

.scroll11 {
  	height: 600px; /*400px;*/
    margin: auto; /*0 15px 0 15px;*/
  	padding:  5px; /*30px 5px 30px 5px;*/
  	overflow-y: scroll;
  	border: solid 3px;
    border-radius: 10px;
    /*background-color: #eeeeee;*/
    background-color: rgba(240, 240, 240, 0.6);
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
}
          
.scroll2 {
  	height: 400px;
    margin: auto; /*0 15px 0 15px;*/
    padding: 5px;
  	overflow-y: scroll;
  	/*border: solid 2px;*/
    background-color: #eeeeee;
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
}

.bg1{
  height: auto;
  width: auto;
  margin: 5px auto 5px auto; 
  /*padding: 15px;*/
  background-color: #ECECEC; /* For browsers that do not support gradients */
  background-image: linear-gradient(#ECECEC, #FCFCFC);
  border: none 3px;
  border-radius: 10px;
}

.bg11{
  height: auto;
  width: auto;
  margin: 5px auto 5px auto; 
  padding: 2px;
  background-color: #ECECEC; /* For browsers that do not support gradients */
  background-image: linear-gradient(#ECECEC, #FCFCFC);
  border: none 3px;
  border-radius: 10px;
}

          
.bg2{
  height:auto;
  width: auto;
  margin: 5px auto 5px auto;
  border: none 3px;
  border-radius: 10px;
}

.frame {
  border: none; /*solid, 10px, #BCBCBC;*/&
  /*border-radius: 10px;*/
  /*margin: 15px;*/
  /*height: auto;*/
  /*width: auto;*/
}

.shade {
    width: 70%;
    padding: 5px;
    /*margin: 15px;*/
    box-shadow: 10px 10px rgba(128, 128, 128, 0.3);
}  

.shade1 {
    width: 70%;
    padding: 0px 15px 15px 0px;
    /*background-image: linear-gradient(to bottom right, red, yellow);*/
    background-image: linear-gradient(135deg, #A0A0A0, #EFEFEF);
}

.shade2 {
    width: 400px;
    margin: auto;
    padding: 15px;
    /*background-image: linear-gradient(to bottom right, red, yellow);*/
    background-image: linear-gradient(135deg, #A0A0A0, #EFEFEF);
} 

.rahmen-eisenbahn {
    border: solid; /*none;*/
    border-color: #a0a0a0;   
    padding: 0px 5px 0px 5px;
    margin-top: 5px;
    border-radius: 10px;
	-webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
}

.rahmen-intro-eisenbahn {
    border: solid; /*none;*/
    border-color: #a0a0a0;   
    border-radius: 10px;
	-webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
}

.#bg-intro-ffm{
    /*background-image: url("/images/stories/media/frankfurt/intro-ffm50a.png");*/
  	/*background-color: #EBEBEB;*/
    margin: 0px;
    padding: 10px;
    background-size: cover;/*scaliert mit Beschneidung*/
    background-repeat: no-repeat; /*keine Kacheln*/
    /*background-attachment: fixed;*/ /*wird nicht gescrollt*/
    background-position: center center; /*x y zentriert*/
    border: solid; /*none;*/
    border-color: #ffffff;   
    border-radius: 10px;
}  

.aside {
  	border: solid; /*none;*/
    border-color: #e68a00;
    background-color: rgba(230, 138, 0, 0.3); /*#ffff00;*/  /*#d3d3d3;*/
  	margin: 10px;
  	padding: 0 5px 0 5px;
  	width: auto;  /*Modulstil: nocard*/
  	height: 250px;
	overflow-y: scroll; 
}

.btn.btn-primary.button.subbutton {
  color: #000000;
  border: none;
  background-color: #ddd;
  font-weight: bold; 
}

input {
   background: none;
   border: none;
}


/********* schmaler Bildschirm *********/
/* gilt nur > min-width! */ 
@media (min-width: 1300px) {
.container-akquise {
   width: 650px;
   margin: auto;
  }  

.container-akquise1 {
   width: 450px;
   margin: auto;
  }  

.container-akquise2 {
   width: 700px;
   margin: auto;
  }  

/*@media (min-width:  844px) {
.container-home {
    display: grid; 
    gap: 60px;
  	/*einzeilig*/
    /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
  	/*grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));*/
	grid-template-columns: 1fr 2fr; 
    /*height:420px;*/
	/*overflow-y: scroll;*/
    -webkit-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
  }
}
  
/* fading-Klassen in <div, <p, modul einbauen */
.zoomIn {
  	-webkit-animation-name: zoomIn;
  	animation-name: zoomIn;
  	-webkit-animation-duration: 1s;
  	animation-duration: 1s;
  	-webkit-animation-fill-mode: both;
  	animation-fill-mode: both;
  	}
  	@-webkit-keyframes zoomIn {
  	0% {
  	opacity: 0;
  	-webkit-transform: scale3d(.3, .3, .3);
  	transform: scale3d(.3, .3, .3);
  	}
  	50% {
  	opacity: 1;
  	}
  	}
  	@keyframes zoomIn {
  	0% {
  	opacity: 0;
  	-webkit-transform: scale3d(.3, .3, .3);
  	transform: scale3d(.3, .3, .3);
  	}
  	50% {
  	opacity: 1;
  	}
    } 

.fadeInLeft {
  	-webkit-animation-name: fadeInLeft;
  	animation-name: fadeInLeft;
 	-webkit-animation-duration: 1s;
  	animation-duration: 1s;
  	-webkit-animation-fill-mode: both;
  	animation-fill-mode: both;
 	}
  	@-webkit-keyframes fadeInLeft {
  	0% {
  	opacity: 0;
  	-webkit-transform: translate3d(-100%, 0, 0);
  	transform: translate3d(-100%, 0, 0);
  	}
  	100% {
  	opacity: 1;
  	-webkit-transform: none;
  	transform: none;
  	}
  	}
  	@keyframes fadeInLeft {
  	0% {
  	opacity: 0;
  	-webkit-transform: translate3d(-100%, 0, 0);
  	transform: translate3d(-100%, 0, 0);
  	}
  	100% {
  	opacity: 1;
  	-webkit-transform: none;
  	transform: none;
  	}
    } 

.fadeInRight {
  	-webkit-animation-name: fadeInRight;
  	animation-name: fadeInRight;
  	-webkit-animation-duration: 1s;
  	animation-duration: 1s;
  	-webkit-animation-fill-mode: both;
  	animation-fill-mode: both;
  	}
  	@-webkit-keyframes fadeInRight {
  	0% {
  	opacity: 0;
  	-webkit-transform: translate3d(100%, 0, 0);
  	transform: translate3d(100%, 0, 0);
  	}
  	100% {
  	opacity: 1;
  	-webkit-transform: none;
  	transform: none;
  	}
  	}
  	@keyframes fadeInRight {
  	0% {
  	opacity: 0;
  	-webkit-transform: translate3d(100%, 0, 0);
  	transform: translate3d(100%, 0, 0);
  	}
  	100% {
  	opacity: 1;
  	-webkit-transform: none;
  	transform: none;
  	}
    } 

.fadeInDown {
  	-webkit-animation-name: fadeInDown;
  	animation-name: fadeInDown;
  	-webkit-animation-duration: 1s;
  	animation-duration: 1s;
  	-webkit-animation-fill-mode: both;
  	animation-fill-mode: both;
  	}
  	@-webkit-keyframes fadeInDown {
  	0% {
  	opacity: 0;
  	-webkit-transform: translate3d(0, -100%, 0);
  	transform: translate3d(0, -100%, 0);
  	}
  	100% {
  	opacity: 1;
  	-webkit-transform: none;
  	transform: none;
  	}
  	}
  	@keyframes fadeInDown {
  	0% {
  	opacity: 0;
  	-webkit-transform: translate3d(0, -100%, 0);
  	transform: translate3d(0, -100%, 0);
  	}
  	100% {
  	opacity: 1;
  	-webkit-transform: none;
  	transform: none;
  	}
    } 

.rotateIn {
    -webkit-animation-name: rotateIn;
     animation-name: rotateIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes rotateIn {
    0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
    }
    100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    }
    }
    @keyframes rotateIn {
    0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
    }
    100% {
    -webkit-transform-origin: center;
    transform-origin: center;
   -webkit-transform: none;
    transform: none;
    opacity: 1;
    }
    } 

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes rotateInDownLeft {
    0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
    }
    100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    }
    }
    @keyframes rotateInDownLeft {
    0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
    }
    100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    }
    }
}