@charset "utf-8";
/* CSS Document */

body { background-color: #333; color: white; hyphens: auto; }
p { font-size: 1.1rem; }

@font-face {
    font-family: 'tekobold';
    src: url('../font/teko-bold-webfont.woff2') format('woff2'),
         url('../font/teko-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; }


@font-face {
    font-family: 'tekolight';
    src: url('../font/teko-light-webfont.woff2') format('woff2'),
         url('../font/teko-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; }


@font-face {
    font-family: 'tekomedium';
    src: url('../font/teko-medium-webfont.woff2') format('woff2'),
         url('../font/teko-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; }


@font-face {
    font-family: 'tekoregular';
    src: url('../font/teko-regular-webfont.woff2') format('woff2'),
         url('../font/teko-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; }


@font-face {
    font-family: 'tekosemibold';
    src: url('../font/teko-semibold-webfont.woff2') format('woff2'),
         url('../font/teko-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal; }

h1 { font-family: 'tekoregular', Arial, sans-serif; }
h2 { font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; }
h3 { font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; }
h4 { font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; }
h5 { font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; }

.nav-link { font-family: 'tekoregular', Arial, sans-serif; font-size: 1.5rem; padding-top: 1rem; }


.dropdown-item.active { background-color: #ff9966 !important; color: black; }
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
	color: #cc6633;
}

.carousel-item > img {
  width: 100%
}

.gruppencard  {background-color: #ddd;}
.gruppencard:hover { background-color: #fff; }

.card-img-wrap {
  overflow: hidden;
  position: relative;
}
.card-img-wrap:after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  backnd: rgba(255,255,255,0.3);
  opacity: 1;
  transition: opacity .25s;
}
.card-img-wrap img {
  transition: transform .25s;
  width: 100%;
}
.card-img-wrap:hover img {
  transform: scale(1.2);
}
.card-img-wrap:hover:after {
  opacity: 1;
}

.mylink { color: white; text-decoration: none; }
.mylink:hover { color: #ff9966; }

.auswahlg:hover { background-color: white !important; }
.auswahll { background-color: #c6c6c6; }

.skills ul a { text-decoration: none; font-size: 1.2rem; }
.skills ul a:hover li { background-color: #ff9966; } 

.knopf { overflow: visible; }
.knopf a img { opacity: 1; overflow: visible; height: 50px; }
.knopf a:hover img { opacity: 1; height: 100px; transition: opacity .5s; transition: height .5s; overflow: visible; }

.myut1 { margin-bottom: -2rem; }                  /* Untertitel auf index.php der beiden Hauptauswahlen */
.mycc1 { right: 0; left: 0; position: relative; } /* Untertitel auf index.php der beiden Hauptauswahlen */

@media (max-width: 767.98px) {          /* Breakpoints: 575.98px  767.98px  991.98px  1199.98px  1399.98px */
  .knopf { visibility: hidden; }   
  .carousel-indicators { visibility: hidden; }
  .myut1 { margin-bottom: 1rem; visibility: visible; }
/*  .mycc1 { right: 15%; bottom: 1.25rem; left: 15%; padding-top: 1.25rem; padding-bottom: 1.25rem; position: absolute; visibility: visible; } */
  .mycc1 { margin-bottom: -2.2rem; padding-bottom: 0; position: absolute; visibility: visible; }
}

.mytopics1 a img:hover { border-bottom: 2px solid #ff9966; padding-bottom: 4px; }
.mytopics1 a img { border-bottom: 2px solid #333; padding-bottom: 4px; }