@charset "utf-8";

/* CSS Document */
/* stilkunst.audioplayer.css */
/* =========================================== */
/* Created: 11.05.2026                         */
/* Updated: 11.05.2026                         */
/* =========================================== */

/*
STILKUNST AUDIO PLAYER
----------------------

CSS-Datei für den Stilkunst Audio Player.

Die Datei definiert:

- Grundlayout des Players
- Button-Darstellung
- Fortschrittsbalken
- Zeitdarstellung
- Farbvarianten
- typografische Gestaltung

Die Audio-Wiedergabe selbst erfolgt über
das native HTML5-<audio>-Element.

Das <audio>-Element bleibt unsichtbar;
die gesamte sichtbare Oberfläche wird
über CSS gestaltet.

===========================================
VERWENDUNG
===========================================

CSS-Datei im <head> einbinden:

<link rel="stylesheet"
      href="/assets/css/stilkunst.audioplayer.css">

Das zugehörige JavaScript:

<script src="/assets/js/stilkunst.scripts.audioplayer.js"></script>

===========================================
GRUNDSTRUKTUR
===========================================

Die Player werden durch das JavaScript
automatisch erzeugt.

Erforderlich ist lediglich ein leerer
Container:

<div id="player1"></div>

Der Player wird anschließend mit:

createStilkunstAudioPlayer(...)

initialisiert.

===========================================
FARBSTEUERUNG
===========================================

Alle Farben werden über CSS-Variablen
gesteuert.

Die Grunddefinition befindet sich in:

.sk-audio

Darauf bauen die Varianten auf:

.sk-audio-light
.sk-audio-dark
.sk-audio-liturgical
.sk-audio-recommend

Eigene Varianten können jederzeit
ergänzt werden.

Beispiel:

.sk-audio-myvariant{
  --sk-audio-bg:#ffffff;
  --sk-audio-accent:#7a0000;
}

===========================================
TYPOGRAFIE UND DESIGN
===========================================

Der Player ist bewusst ruhig und reduziert
gestaltet.

Ziel:
- textnahe Audio-Darstellung
- keine Podcast-/Streaming-Optik
- zurückhaltende Integration in Stilkunst
- ruhige editorielle Wirkung

Der Fokus liegt auf:
- Lesbarkeit
- einfacher Bedienung
- typografischer Ruhe
- konsistenter Seitenästhetik

=========================================== */

/* Grundstruktur */
.sk-audio{
  --sk-audio-bg:#fff;
  --sk-audio-border:#d8d8d8;
  --sk-audio-text:#222;
  --sk-audio-muted:#666;
  --sk-audio-soft:#e4e4e4;
  --sk-audio-accent:#196081;
  --sk-audio-button-bg:#f8fbfc;
  --sk-audio-button-border:#b8c7cc;
  --sk-audio-button-hover:#eef6f8;

  max-width:560px;
  margin:1.2rem 0;
  padding:1rem 1.15rem;
  border:1px solid var(--sk-audio-border);
  border-radius:10px;
  background:var(--sk-audio-bg);
  color:var(--sk-audio-text);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}

.sk-audio-title{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:var(--sk-audio-text);
}

.sk-audio-subtitle,
.sk-audio-reader,
.sk-audio-music{
  margin:.2rem 0 0;
  font-size:13px;
  color:var(--sk-audio-muted);
}

.sk-audio-reader,
.sk-audio-music{
  font-size:12px;
}

.sk-audio-head{
  margin-bottom:.85rem;
}

.sk-audio-row{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.sk-audio-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--sk-audio-button-border);
  background:var(--sk-audio-button-bg);
  color:var(--sk-audio-accent);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.sk-audio-btn:hover{
  background:var(--sk-audio-button-hover);
  border-color:var(--sk-audio-accent);
}

.sk-audio-btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.sk-audio-main{
  flex:1;
}

.sk-audio-bar{
  position:relative;
  height:7px;
  border-radius:999px;
  background:var(--sk-audio-soft);
  cursor:pointer;
  overflow:hidden;
}

.sk-audio-progress{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
  background:var(--sk-audio-accent);
  border-radius:999px;
}

.sk-audio-meta{
  display:flex;
  justify-content:space-between;
  margin-top:.45rem;
  font-size:12px;
  color:var(--sk-audio-muted);
  font-variant-numeric:tabular-nums;
}

.sk-audio audio{
  display:none;
}

/* Variante: hell */
.sk-audio-light{
  --sk-audio-bg:#fff;
  --sk-audio-border:#d8d8d8;
  --sk-audio-text:#222;
  --sk-audio-muted:#666;
  --sk-audio-soft:#e4e4e4;
  --sk-audio-accent:#196081;
  --sk-audio-button-bg:#f8fbfc;
  --sk-audio-button-border:#b8c7cc;
  --sk-audio-button-hover:#eef6f8;
}

/* Variante: dunkel */
.sk-audio-dark{
  --sk-audio-bg:#202426;
  --sk-audio-border:#3a4246;
  --sk-audio-text:#f1f1f1;
  --sk-audio-muted:#b8c0c4;
  --sk-audio-soft:#3d4549;
  --sk-audio-accent:#8fc6d8;
  --sk-audio-button-bg:#293033;
  --sk-audio-button-border:#56636a;
  --sk-audio-button-hover:#333d41;
}

/* Variante: liturgisch ruhig */
.sk-audio-liturgical{
  --sk-audio-bg:#fbfaf6;
  --sk-audio-border:#d7d0bf;
  --sk-audio-text:#2b2924;
  --sk-audio-muted:#746d60;
  --sk-audio-soft:#e4ddce;
  --sk-audio-accent:#6f5f35;
  --sk-audio-button-bg:#fffdf7;
  --sk-audio-button-border:#c7bea8;
  --sk-audio-button-hover:#f4efe3;
}

/* Variante: hervorgehobene Empfehlung */
.sk-audio-recommend{
  --sk-audio-bg:#f7fbfc;
  --sk-audio-border:#aac7d2;
  --sk-audio-text:#1f2b30;
  --sk-audio-muted:#5d737c;
  --sk-audio-soft:#d9e8ed;
  --sk-audio-accent:#196081;
  --sk-audio-button-bg:#ffffff;
  --sk-audio-button-border:#8fb7c5;
  --sk-audio-button-hover:#e9f4f7;

  border-width:2px;
}