/*
 Theme Name:   Florian Seigerschmidt
 Theme URI:    https://generatepress.com
 Description:  GeneratePress child theme
 Author:       Juliane de Vries
 Author URI:   https://ju-like.de
 Template:     generatepress
 Version:      0.1
*/

:root {
  	--sf-rot: #CC0033;
	--sf-accent: #CC0033;
	--sf-dunkelblau: #001F5E;
	--sf-strahlblau: #0000CC;
	--sf-schwarz: #000000;
}
::selection {
  color: #fff;
  background: var(--sf-dunkelblau) !important;
}
* {
	font-family:'Arvo';
}

/* Audio-Player*/
/* ── Container & Background ── */
.mejs-container,
.mejs-container .mejs-controls,
.mejs-embed,
.mejs-embed body,
.mejs-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.mejs-container {
  min-width: 0 !important;
  height: auto !important;
}

/* ── Controls Bar ── */
.mejs-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  height: 28px !important;
  position: static !important;
  border-top: 1px solid #d0d0d0 !important;
  padding-top: 8px !important;
}

/* ── Play/Pause Button ── */
.mejs-button.mejs-playpause-button button {
  background: transparent !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  position: relative !important;
}

/* Play triangle */
.mejs-button.mejs-playpause-button.mejs-play button::before {
  content: '' !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 8px 0 8px 14px !important;
  border-color: transparent transparent transparent #888 !important;
  margin: auto !important;
}

/* Pause bars */
.mejs-button.mejs-playpause-button.mejs-pause button::before {
  content: '' !important;
  display: block !important;
  width: 12px !important;
  height: 14px !important;
  background: linear-gradient(to right, #888 4px, transparent 4px, transparent 8px, #888 8px) !important;
  margin: auto !important;
}



/* ── Progress / Time Rail ── */
.mejs-time-rail {
  flex: 1 !important;
  height: 2px !important;
  padding: 0 !important;
}

.mejs-time-total,
.mejs-time-buffering,
.mejs-time-loaded,
.mejs-time-current,
.mejs-time-float {
  height: 2px !important;
  border-radius: 0 !important;
}

.mejs-time-total {
  background: #d0d0d0 !important;
  margin: 0 !important;
  top: 0 !important;
}

.mejs-time-loaded {
  background: #b8b8b8 !important;
}

.mejs-time-current {
  background: #888 !important;
}

.mejs-time-handle {
  display: none !important;
}

.mejs-time-float {
  display: none !important;
}

/* ── Time Display ── */
.mejs-time,
.mejs-currenttime-container,
.mejs-duration-container {
  color: #888 !important;
  font-size: 11px !important;
  font-family: sans-serif !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}
/* ── Volume ── */
.mejs-button.mejs-volume-button button::before {
  display: block !important;
  width: 12px !important;
  height: 10px !important;
  background: transparent !important;
  border-radius: 1px !important;
  position: relative !important;
}

.mejs-horizontal-volume-slider {
  width: 50px !important;
  height: 2px !important;
}

.mejs-horizontal-volume-total {
  background: #d0d0d0 !important;
  height: 2px !important;
  border-radius: 0 !important;
  top: 0 !important;
}

.mejs-horizontal-volume-current {
  background: #888 !important;
  height: 2px !important;
  border-radius: 0 !important;
}

.mejs-horizontal-volume-handle {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #888 !important;
  border: none !important;
  top: -3px !important;
}
/* Sprite-Icons invertieren: weiß → schwarz, dann grau dimmen */
.mejs-button button {
  filter: invert(0.5) !important; /* 0 = weiß, 1 = schwarz → 0.7 = hellgrau */
}