/*	Author: Sascha Milivojevic (info@hey-sascha.de):
   
		------------------------------------------------------
   
	AMO v1 stylesheet
  
		----------------------------------------------------*/
		
/*	CSS Imports
  
		----------------------------------------------------
*/
@import url('fonts/fonts.css');

/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #323232;
    color: #FFF;
    text-shadow: none;
}

::selection {
    color: #FFF;
    background: #323232;
    text-shadow: none;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;}
    
div img, figure img {
  max-width: 100%;
  width: auto\9; /* ie8 */} 

 
/* ==========================================================================
   VARIABLES
   ========================================================================== */
:root {
  --font-family-body: 'kirvyregular', sans serif; /* für Überschriften */
  --font-color: #323232;
  --weiss: #ffffff;
}

.bg-weiss { background-color: var( --weiss); }
/* ==========================================================================
   Flex Layout
   ========================================================================== */
.flex-row, .flex-column, .flex-row-reverse, .flex-column-reverse { display: flex; flex-wrap: wrap; }   
.flex-row { flex-direction: row; }
.flex-row-reverse  { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }


/* 
 justify-content
 This defines the alignment along the main axis. -> horizontal zueinander
 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
*/
.j-center { justify-content: center; }
.j-start { justify-content: flex-start; }
.j-end { justify-content: flex-end; }
.j-between { justify-content: space-between; }
.j-evenly { justify-content: space-evenly; }
.j-around { justify-content: space-around; }

/*
This defines the default behavior for how flex items are laid out along the cross axis on the current line. -> zueinander in der gleichen Zeile/Spalte bei unterschiedlicher Containerhöhe
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline 
*/

.ai-stretch { align-items: stretch; }
.ai-center { align-items: center; }
.ai-start { align-items: flex-start; }
.ai-end { align-items: flex-end; }
.ai-baseline { align-items: baseline; }

/* 
 align-content
This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline 
*/
.ac-stretch { align-content: stretch; }
.ac-center { align-content: center; }
.ac-start { align-content: flex-start; }
.ac-end { align-content: flex-end; }
.ac-baseline { align-content: baseline; }
.ac-between { align-content: space-between; }
.ac-evenly { align-content: space-evenly; }
.ac-around { align-content: space-around; }
.text-wrap, .kalender { width: 100%; padding: 0 15px; }
.about-img { width: 100%; }
.about-img .item {}
.wrapper.abstand { padding: 80px 40px 0 40px;}
.w100 { width: 100%; padding: 0 15px;}
.w100.grid-4columns { padding-bottom: 40px; }
.w80 { width: 80%;}
.w50 { width: 50%; }


.w40 { width: 40%; }
.w30 { width: 30%;  }
.w20 { width: 20%;  }

figure { padding: 0; margin: 0 auto 20px auto; text-align: center;}
figcaption { padding-top: 5px; margin: 0; }
@media screen and (max-width: 1380px) {

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

@media screen and (max-width: 820px) {
.w50 { width: 100%; }
}
@media screen and (max-width: 680px) {

}
.nopointer { pointer-events: none; }
/* ==========================================================================
    GRID LAYOUT
   ========================================================================== */

.grid-5columns { 
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 30px;} 
    
.grid-3columns-masonry { 
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: masonry; 
    grid-column-gap: 15px;
    grid-row-gap: 15px;}
    
.grid-3columns { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: masonry; 
    grid-column-gap: 60px;
    grid-row-gap: 60px;}
    
.artist-list .artist-image-wrapper, .news-teaser-image, .artist-detail .grid-item {
    aspect-ratio: 1/1;
    overflow:hidden;
} 
.artist-list  .grid-item img, .news-teaser-image img, .artist-detail .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}


@media screen and (max-width: 1380px) {
.grid-5columns  {grid-template-columns: repeat(4, 1fr); }
} 
@media screen and (max-width: 1280px) {
.grid-3columns {grid-template-columns: repeat(2, 1fr); }
} 
@media screen and (max-width: 990px) {
.grid-5columns, .grid-3columns-masonry {grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
.grid-3columns-masonry, .grid-3columns-masonry {grid-template-columns: repeat(2, 1fr); }
.grid-5columns, .grid-3columns  {grid-template-columns: repeat(1, 1fr); }   
} 
/* ==========================================================================
   HTML BODY BASICS
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;}
/* 
@media screen and (max-width: 780px) {
html, body {
  position: relative;
  overflow-x:hidden;}
}

@supports (-webkit-overflow-scrolling: touch) {
html, body {
  position: relative;
  overflow-x:hidden;} 
}
*/  
body {
    overflow-x: hidden; 
    font-family: var(--font-family-body);
    font-weight: 400;
    color: #323232; } 
strong { font-family: 'kirvybold';}
i, em, q, blockquote, cite { font-family: var(--font-family-body); font-style: normal;}
/* ==========================================================================
   FONT COLORS
   ========================================================================== */
p, h1, h2, h3, h4, h5, h6 { color: var( --rot); }
a { color: var(--schwarz); cursor: pointer; text-decoration: none;}
h2 a:hover { color: var(--senf); }
/*
.cta-button { display: inline-block; padding: 10px 40px; text-align: center; font-weight: 400; border: 1px solid var(--schwarz); color: var(--rot);  font-family: var(--font-family-body);}
*/


/* ==========================================================================
   LINK BASICS
   ========================================================================== */    
p a, ul li a { color: var(--font-color); text-decoration: underline; position: relative;}
a {  }
ul { padding: 0; }
ul li { list-style-type: disc;}
nav ul li a{ color: var(--schwarz); text-decoration: none; }
a:hover, nav ul li a:hover, nav ul li.active a, footer ul li a { }
footer ul li a { text-decoration: none;}
/* ==========================================================================
   FONT SIZES
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {  width: 100%; font-weight: 400;}  

p { font-weight: 300; font-size: 18px; line-height: 24px; color: var(--font-color); margin: 0 0 20px 0 }
nav ul > li { font-size: 19px; line-height: 1em; font-weight: 300;}
  
h1, h2, h3, h4, h5, h6 { margin: 0 0 19px 0; }

h1 { 
    font-family: 'kirvyregular'; 
    font-size: 35px;
    line-height: 42px;
    text-transform: uppercase;
	margin: 15px 0 8px 0;}


h2 { 
    font-family: 'kirvylight'; 
    font-size: 29px;
	line-height: 35px;}
.artist-detail h1, .artist-detail h2 { text-align: right;}

    
.repertoire h2, .news-list h3, .text-wrapper h1 {
    text-align: left;
}

.news-list h2, .news-detail-wrapper h1 { 
    font-family: 'kirvyregular'; 
    font-size: 30px;
    line-height: 38px;
    text-align: left;
    margin: 0 0 10px 0;}
    
.news-detail-wrapper h1 { text-transform: none;}
    
.news-list .date, .news-detail-wrapper .date {
     font-family: 'kirvylight';
     margin-bottom: 10px; }

.news-list h1 { 
    margin-bottom: 30px;
    text-align: center;
}
    
.repertoire h3  {
    width: 100%;
    font-size: 16px;
    margin: 0 0 25px 0;
    font-family: 'kirvybold';
    text-transform: uppercase; 
	background-color: #0077C8;
	color: #FFF;
	padding: 5px;
 }
     
.repertoire h4 { 
width: 100%;
font-size: 20px;
line-height: 24px;
    font-family: 'kirvybold';
    margin: 30px 0 10px 0;
     }
     
.artist-name h3 {
    line-height: 1em;
    font-size: 22px;
    margin-bottom: 10px;
    font-family: 'kirvyregular', sans-serif;
}
.artist-name h4 {
    line-height: 1;
    font-size: 20px;
    margin-bottom: 0;
    font-family: 'kirvylight', sans-serif;
}     
     
@media screen and (max-width: 990px) { 
h1, h2 { text-align: left; }

}


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

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

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

}

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


}




/* ==========================================================================
   NAVIGATION
   ========================================================================== */
nav { 
    width: 100%;
}
nav.top { padding: 40px 0 0 0; }
nav ul { padding: 0; margin: 0 0 20px 0; width: 100%;  justify-content: space-between;}
 
nav ul li a {
    text-transform: uppercase;
    font-family: 'kirvylight', sans-serif;
    font-size: 19px;
    line-height: 29px;
    color: #323232;;}
     
header nav ul li a.active {
    font-family: 'kirvybold', sans-serif;}

nav ul > li { 
    list-style: none !important; 
    cursor: pointer; } 

@media screen and (max-width: 600px) {
nav.left ul  { justify-content: center;}
nav.left ul li { padding: 10px 5px; }
nav.left ul li:last-child { padding-right: 0; }
}

.topbar { 
    max-width: 1920px;
    width: 84vw;
    margin: 0 auto;
}
.topbar ul {
    margin: 0;
    padding: 10px 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
    background-color: #0077c8;}
    
.topbar ul > li { 
    list-style: none !important; 
    cursor: pointer; }
    
.topbar ul > li a {
color: #fff;
} 

.topbar img.icon { 
margin: 0 10px;
height:23px;
} 
.button img.icon { 
margin-right: 16px;
height:13px;
} 

li.lang a, li.lang {
    font-family: 'kirvybold', sans-serif;
    text-decoration: none;
    color: #FFF;
    font-size: 16px;
    line-height: 1em;}
    


/* ==========================================================================
    HEADER
   ========================================================================== */
header { 
    max-width: 1920px;
    width: 84vw;
    padding: 5px 15px 15px 15px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.8);}

.mobile-navigation {
    display: none;}
    
header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

header nav ul { width: 100%;}
header nav, header nav ul { width: 100%; }
header nav ul li { padding: 0 20px; }
header nav .logo{ position: relative; padding: 0; margin: 0 50px;}
header nav .logo:before, header nav .logo::after {
    position: absolute;
    content: "";
    top: calc(50% - 3px);
    height: 6px;
    width: 6px;
    background-color: #0077C8;
    border-radius: 50%;
}

header nav .logo:before { left: -32px;}
header nav .logo:after { right: -32px;}
@media screen and (max-width: 880px) { 
.mobile-navigation {display: flex; padding-top: 20px; }
.mobile-logo { margin-bottom: 30px;}
header nav, header nav .logo { display: none;}
header { width: 100%;     position: relative;}
header nav ul li { padding: 0 15px; }
} 
/* ==========================================================================
   ARTIST DETAIL
   ========================================================================== */
 .tab-navi { 
    max-width: 1920px;
    width: 84vw;
    padding: 40px 0 0 0;
    margin: 0 auto;}
.artist-detail, .news-detail, .page { 
    max-width: 1280px;
    width: 84vw;
    padding: 40px 0 30px 0;
    margin: 0 auto;}
    
.news-detail-wrapper {
width: 100%;
max-width: 700px;
padding: 0 15px; 
}

.text-wrapper{
width: 100%;
max-width: 850px;
padding: 0 15px; 
}


.news-detail {
min-height: 1000px;
}

.news-detail-wrapper .news-detail-image {
    margin: 0 auto 30px auto;
    width: 100%;
    max-width: 300px;
}

.artist-detail-bio {
    width: 50%;
    padding: 0 15px;}
  
.bio-headline { margin-bottom: 20px;}

.artist-detail-info {
    width: 41.5%;
    padding-right: 8.5%;
}
 
.artist-detail-info-image { 
    position: relative;
    margin-bottom: 50px;}

    
.artist-detail-info-image:after {
    content: "";
    position: absolute;
    display: block;
    width: 50vw;
    height: 87%;
    bottom: -20px;
    right: -20px;
    background-color: #0077C8;
    z-index: -1;
}
.buttons { align-items: flex-end;}
@media screen and (max-width: 990px) { 
.artist-detail-bio { width: 100%; padding: 20px 0;}
.artist-detail-info { width: 100%; padding-right: 0px; }
.artist-detail-info-image:after { width: 100vw;}
.buttons { align-items: flex-start;}
} 

.button { 
margin-bottom: 12px; 
width: 195px;
-webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;}
.news-list .button { width: auto; margin-bottom: 10px; }
.artist-detail .button:hover { width: 205px;}

.button a {
    display: block;
    padding: 10px 18px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #0077C8;
    font-size: 13px;
    line-height: 1em;
}
.artist-detail .button:hover a { padding-left: 23px;} 
.artist-detail-info-contact {
    padding: 25px 18px;
    min-width: 50%;
    margin-bottom: 12px;
    background-color: #0077C8;}
    
.artist-detail-info-contact a { color: var(--weiss);}
.artist-text-wrapper { margin-top: 30px;}

.tablinks, .tablinks2 { 
    padding: 10px 18px;
    text-transform: uppercase;
    color: #ffffff;
    border: 1px solid #0077C8;
    color: #0077C8;
    font-size: 13px;
    line-height: 1em;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    list-style: none;
    margin-right: 20px;
    cursor: pointer;
}

.tablinks.active, .tablinks:hover, .tablinks2.active, .tablinks2:hover {
    color: #FFF;
    background-color: #0077C8;
}
.tabcontent, .tabcontent2 { width: 100%; }
.tab-navigation{ padding-top: 0px;}
.tab-navi .tab-navigation{ padding-top: 0px;}
.composer {
    width: 100%;
    margin-bottom: 15px;
}
.tabcontent.repertoire { padding-top: 25px;}
.opera {
width: 100%;
padding: 5px;
}
.composer .cname {
padding: 5px;
margin-bottom: 5px;
color: #323232;
font-size: 22px;
font-family: 'kirvybold';
border-bottom: 1px solid #0077C8;
}
.opera .title {
padding-right: 30px;
width: 50%;}

.opera .role {
color: #0077C8;}
.post-thumbnail-caption {
	font-size: 10px;
	padding-top: 5px;
}
.tags .button { margin-right: 10px;}

.bio-body { margin-bottom: 60px; }
/* ==========================================================================
   ARTIST LISTE
   ========================================================================== */

.artist-image {
    aspect-ratio: 1/1;
    position:relative;
}

.artist-image .ico {
    position: absolute;
    color: #0077C8;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.artist-image .ico-alto {
    top: -5%;
    left: -27%;
    font-size: 6vw;
}
.artist-image .ico-contralto {
    bottom: 0;
    left: -22%;
    font-size: 6vw;
}
.artist-image .ico-mezzo {
    bottom: -7%;
    right: -12%;
    font-size: 4vw;
}
.artist-image .ico-mezzo-soprano {
    top: -20%;
    left: -40%;
    font-size: 19vw;
}
.artist-image .ico-soprano {
    top: -20%;
    left: -13%;
    font-size: 5.65vw;
}
.artist-image .ico-bass {
    left: -13%;
    top: -8%;
    font-size: 10vw;
}
.artist-image .ico-baritone {
    right: -42%;
    top: -8%;
    font-size: 10vw;
}
.artist-image .ico-tenor {
    top: -8%;
    left: -60%;
    font-size: 14vw;
}
.ico {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.artist-image-wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
}

    
.copyright {
    position: absolute;
    z-index: 2;
    bottom: 5px;
    right: 5px;
    font-size: 10px !important;
    line-height: 12px;
    color: var(--weiss);
}

.artist-image_wrapper:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.artist-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.artist-name {
    padding: 15px 0;
}

.artist-name > a:hover {
    color: #323232;
}
.artist > a:hover .artist-image .ico{
    opacity: 1;
    visibility: visible;
}
.artist > a:hover .artist-image img {
    transform: scale(1.1);
}

@media screen and (max-width: 767px) {
    .artist_image:before{
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: -8px;
        height: 20px;
        width: 45%;
        background-color: #0077C8;
    }
    .ico{
        display: none;
    }
}

.artist-list {
    max-width: 1920px;
    width: 84vw;
    padding: 40px 0 30px 0;
    margin: 10px auto 0 auto;
}
.news-list {
    max-width: 1920px;
    width: 84vw;
    padding: 10px 0 30px 0;
    margin: 10px auto 0 auto;
}
.artist-list > .artist {
    width: 100%;
}
@media (hover: hover) {
.artist-list:hover > .artist{
    opacity: .2;
}

.artist-list:hover > .artist:hover{
    opacity: 1;
}
}


/* ==========================================================================
    Footer
   ========================================================================== */
footer { width: 100%; padding: 30px 0px; background-color: #0077C8;}
footer ul { 
    max-width: 1920px;
    width: 84vw;
    margin: 0 auto;
    padding: 0;
}
footer ul li a {
    color: #FFF;  
    font-family: 'kirvylight', sans-serif;
    font-size: 16px;
    line-height: 1em;
}
    

footer ul li { 
    list-style: none !important; 
    cursor: pointer; 
    margin-right: 15px;} 
    
/* ==========================================================================
   Lightbox
   ========================================================================== */
.goverlay {
       background: rgba(255, 255, 255, 1) !important;
}
.glightbox-clean .gslide-description {
 background-color: transparent;}
.glightbox-clean .gclose path, .glightbox-clean .gnext path, .glightbox-clean .gprev path {
    fill: #000;
}
.glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev {
    background-color: transparent !important;
}
.glightbox-clean .gslide-desc {
    font-family: var(--font-family-body);
    font-weight: 300;
}
/*
.gprev, .gnext { display: none !important;}

*/
/* ==========================================================================
   Position
   ========================================================================== */

.relative, .wrapper.relative { position: relative; }
.sticky { position: -webkit-sticky; position: sticky; top: 20px; }
.sticky2 { position: -webkit-sticky; position: sticky; top: 140px; }
.fixed { position: fixed; }
.absolute { position: absolute;}
img.alignleft { margin: 10px 30px 10px 0; }
img.alignright { margin: 10px 0 10px 30px; }
header.scrolled { visibility: hidden; top: -300px;}
nav.scrolled { visibility: visible; top: 0;}
@media screen and (max-width: 1780px) { 
.sticky2 { top: 130px; }
}
@media screen and (max-width: 1580px) { 
.sticky2 { top: 120px; }
}
@media screen and (max-width: 1380px) {
.sticky2 { top: 110px; }
}
@media screen and (max-width: 1180px) {
.sticky2 { top: 100px; }
}
@media screen and (max-width: 1023px) {
.sticky2 { top: 86px; }
}
section.imprint { border-bottom: 20px solid var(--rot);}
@media screen and (max-width: 1380px) { 
section.imprint { padding-left: 120px; }
}
@media screen and (max-width: 1023px) { 
section.imprint { padding-left: 20px; padding-top: 200px;}
}

#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #0077C8;
  color: white;
  cursor: pointer;
/* Garantiert die runde Form */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  
  /* Zentriert den Pfeil im Kreis */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

    .mini-preview-image {
        width:85px; height: 85px; border-radius: 10px; overflow:hidden;
    }
    .mini-preview-image img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
    .mini-news { width: 100%; max-width: 650px;  margin: 0 auto; padding: 0 20px 20px 20px;}
.mini-news a { text-decoration: none;}
    .mini-preview-headline {font-size: 16px; line-height: 22px; width: calc(100% - 100px); }
    .mini-preview-headline .artist { font-weight: 700;  }
    .mini-preview-headline .datum { font-weight: 300;  color: #aaa;}
    .splide__track { width: 100%; max-width: 500px; }
    .splide__arrow { background: #FFF; }
    .splide__arrow svg { fill: #0077C8;}
    .splide__pagination__page.is-active {
          background:#0077C8;
          transform: scale(1.05);
          z-index: 1;
      }

.accordion-btn { width: 100%; cursor:pointer; margin-top: 10px; padding: 5px; position: relative;  border-bottom: 1px solid #0077C8;}
.accordion-btn::after {
  content: " ▼"; /* Das Dreieck-Symbol */
  font-size:16px;
  color: #0077C8; 
  position: absolute;
	right: 5px;
	
}
.accordion-btn {  }
.accordion-btn.active::after { content: " ▲"; }
/* Panel Styles */
.panel {
  	
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: 0.5s ease-in-out;
  opacity: 0;}
/* Show Panel onclick */
.panel.show {
  opacity: 1;
  max-height: none;
  padding: 5px;}
.media { margin-bottom: 20px; }
.image-wrapper {
  position: relative;
  display: inline-block; /* Passt sich an die Bildgröße an */
}

.image-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
}

.image-wrapper::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 50px;       /* Breite der Grafik anpassen */
  height: 50px;      /* Höhe der Grafik anpassen */
  background-image: url('img/video.svg');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none; /* Damit Mausklicks durch das Pseudoelement hindurchgehen */
	opacity: 0.5;
	transition: 0.3s all ease-in-out;
}
.image-wrapper:hover::after { opacity: 1; }
.media-description { padding-top: 5px;}
.pagination { width: 100%; margin: 40px 0; height: 30px;}
.pagination a  {
	display: block;
padding: 10px 18px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #0077C8;
    font-size: 13px;
    line-height: 1em;
}