/* Player im Feratel-Stil.
 *
 * Zwei Festlegungen, die das Aussehen bestimmen:
 *
 * 1. Das Video wird vollständig eingepasst, und die Restfläche füllt eine
 *    unscharfe Kopie desselben Bildes (`fit=blur`, die Vorgabe). Es geht also
 *    weder Bild verloren noch stehen schwarze Balken herum.
 *
 *    Früher stand hier `object-fit: cover` mit der Begründung, ein
 *    willkürlicher Bildausschnitt sei harmloser als ein schwarzer Balken. Das
 *    stimmt nur, solange das Fenster ungefähr das Format des Videos hat: der
 *    Beschnitt wächst genau mit der Abweichung. Auf einem 21:9-Bildschirm sind
 *    das bei 16:9-Quelle rund 24 %, bei 4:3-Quelle über 40 % - das Bild wirkt
 *    dann "voll gecroppt". Beide alten Betriebsarten gibt es weiterhin:
 *    `&fit=contain` (einpassen, schwarze Ränder) und `&fit=cover` (füllen,
 *    beschneiden).
 * 2. Die Steuerleiste liegt transluzent ÜBER dem Bild, nicht darunter. Dadurch
 *    ist der Player in jedem Seitenverhältnis brauchbar - hochkant am Handy
 *    genauso wie im 21:9-Banner.
 *
 * Kein Build-Schritt, keine Abhängigkeiten - reines CSS.
 */

:root {
  --akzent: #4aa3ff;
  --grund: #000;
  --flaeche: #1c1f26;
  --rand: #3a3e47;
  /* Alles, was über dem Bild liegt, benutzt dieselbe transluzente Fläche.
     Ein deckender Kasten mitten im Bild wirkt wie ein Fremdkörper - das
     Kamerabild soll durchscheinen, so wie es unter der Steuerleiste auch tut. */
  --schleier: rgba(18, 21, 27, .82);
  --schleier-rand: rgba(255, 255, 255, .14);
  --schleier-text: #f2f4f8;
  --text: #f2f4f8;
  --text-leise: #a7aeba;
  --marker: #565c68;
  --radius: 8px;
  --leiste-hoehe: 56px;
}

html[data-theme="light"] {
  --flaeche: #ffffff;
  --rand: #dce1e9;
  --schleier: rgba(252, 253, 255, .88);
  --schleier-rand: rgba(0, 0, 0, .12);
  --schleier-text: #1a1f29;
  --text: #1a1f29;
  --text-leise: #5c6675;
  --marker: #c2cad6;
}

* { box-sizing: border-box; }

/* Ein `display` im Stylesheet schlaegt die Regel des Browsers fuer das
   hidden-Attribut - `.ikone { display: grid }` liesse einen ausgeblendeten
   Knopf also trotzdem stehen. Deshalb hier einmal ausdruecklich. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--grund);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

.player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* -- Bild -------------------------------------------------------------- */

.stage { position: absolute; inset: 0; }

.stage video {
  position: relative;
  /* Über dem unscharfen Hintergrund, unter allem anderen. Die Einblendungen
     und die Kopfleiste liegen ab z-index 2. */
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  /* Kein deckender Hintergrund: bei fit=blur soll die unscharfe Fläche
     darunter durchscheinen, sonst wäre sie umsonst gezeichnet. */
  background: transparent;
  object-fit: contain;
  object-position: center;
}

/* Unscharfer Hintergrund (Vorgabe).
 *
 * Das Bild wird vollständig eingepasst, und was rechts und links -- oder oben
 * und unten -- übrig bleibt, füllt eine unscharfe, formatfüllend skalierte
 * Kopie desselben Bildes. Damit geht nichts vom Bild verloren, und trotzdem
 * steht nirgends ein schwarzer Balken.
 *
 * Warum das nötig wurde: `cover` schneidet genau so viel weg, wie das Fenster
 * vom Videoformat abweicht. Auf einem 21:9-Bildschirm sind das bei einer
 * 16:9-Quelle rund ein Viertel des Bildes, bei einer 4:3-Quelle über vierzig
 * Prozent.
 */
.stage .hintergrund {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Die Leinwand ist 32x18 gross und wird hier formatfuellend hochgezogen --
     das Hochskalieren allein weicht die Kanten schon auf, die Weichzeichnung
     erledigt den Rest. */
  object-fit: cover;
  filter: blur(24px) saturate(1.2) brightness(.7);
  /* Etwas groesser als der Rahmen: der Weichzeichner zieht sonst die
     durchsichtigen Kanten mit ins Bild und es entsteht ein heller Saum. */
  transform: scale(1.12);
  pointer-events: none;
}

/* Nur die Vorgabe zeigt den unscharfen Hintergrund. */
html:not([data-fit="blur"]) .stage .hintergrund { display: none; }

/* Die beiden bisherigen Betriebsarten bleiben unveraendert erhalten. */
html[data-fit="contain"] .stage video { object-fit: contain; background: #000; }
html[data-fit="cover"] .stage video { object-fit: cover; background: #000; }

/* -- Kopfleiste -------------------------------------------------------- */

/* Nur ein Verlauf, kein Inhalt: er hebt helle Einblendungen von einem hellen
   Himmel ab. Was oben steht, kommt aus den Overlays. */
.kopf {
  position: absolute;
  inset: 0 0 auto 0;
  height: 22%;
  max-height: 120px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
}

/* -- Globale Einblendungen --------------------------------------------
 *
 * Neun Ankerpunkte, jeweils mit eigenem Abstand zum Rand. Die unteren drei
 * rücken über die Steuerleiste, sonst lägen sie darunter begraben.
 *
 * Jede Position bekommt eine eigene Regel statt einer cleveren Kombination
 * aus Präfix- und Suffix-Selektoren: `transform` gibt es nur einmal je
 * Element, und die Zentrierung braucht je nach Achse eine andere.
 */

.overlay {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  max-width: calc(100% - 2 * var(--abstand, 3%));
  line-height: 0;
}

.overlay[data-art="image"] { width: var(--groesse); }
.overlay a { pointer-events: auto; display: block; }
.overlay img { display: block; width: 100%; height: auto; object-fit: contain; }

.overlay-text {
  display: inline-block;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
  font-weight: 600;
}

.overlay[data-pos="top-left"]      { top: var(--abstand); left: var(--abstand); }
.overlay[data-pos="top-center"]    { top: var(--abstand); left: 50%; transform: translateX(-50%); }
.overlay[data-pos="top-right"]     { top: var(--abstand); right: var(--abstand); }
.overlay[data-pos="middle-left"]   { top: 50%; left: var(--abstand); transform: translateY(-50%); }
.overlay[data-pos="middle-center"] { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.overlay[data-pos="middle-right"]  { top: 50%; right: var(--abstand); transform: translateY(-50%); }

.overlay[data-pos="bottom-left"] {
  bottom: calc(var(--leiste-hoehe) + var(--abstand));
  left: var(--abstand);
}

.overlay[data-pos="bottom-center"] {
  bottom: calc(var(--leiste-hoehe) + var(--abstand));
  left: 50%;
  transform: translateX(-50%);
}

.overlay[data-pos="bottom-right"] {
  bottom: calc(var(--leiste-hoehe) + var(--abstand));
  right: var(--abstand);
}

/* Auf schmalen Rahmen sitzt über der Leiste noch die Ortszeile. */
@media (max-width: 780px) {
  .overlay[data-pos^="bottom"] { bottom: calc(var(--leiste-hoehe) + 54px + var(--abstand)); }
}

/* Auf einem Handy schrumpft eine feste Prozentbreite ins Unleserliche: 18 %
   von 390 px sind 70 px, und darin ist kein Schriftzug mehr zu erkennen.
   Bildeinblendungen wachsen deshalb auf schmalen Rahmen relativ mit,
   gedeckelt bei knapp der halben Breite. */
@media (max-width: 560px) {
  .overlay[data-art="image"] { width: min(45%, calc(var(--groesse) * 1.9)); }
}

/* -- Überlagerungen ---------------------------------------------------- */

.mitte-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.mitte-overlay.meldung {
  color: #fff;
  background: rgba(0, 0, 0, .55);
  text-align: center;
  padding: 24px;
  pointer-events: auto;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: var(--akzent);
  border-radius: 50%;
  animation: drehen .9s linear infinite;
}

@keyframes drehen { to { transform: rotate(360deg); } }

.grossPlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.grossPlay svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.grossPlay:hover { background: var(--akzent); }

/* -- Steuerleiste ------------------------------------------------------ */

.leiste {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .18));
}

.fortschritt {
  position: absolute;
  inset: auto 0 100% 0;
  height: 4px;
  cursor: pointer;
  background: rgba(255, 255, 255, .25);
}

.fortschritt-gefuellt { height: 100%; width: 0; background: var(--akzent); }

.leiste-inhalt {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--leiste-hoehe);
  padding: 0 12px;
}

.leiste-links,
.leiste-rechts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.leiste-rechts { justify-content: flex-end; }

.leiste-mitte {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.zeitblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  min-width: 74px;
}

.uhr { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.datum { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
.verlauf { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }

.ort-gruppe { display: flex; align-items: center; gap: 8px; min-width: 0; }

.ort { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

.ort-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ort-zusatz {
  font-size: 11px;
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ikone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}

.ikone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ikone:hover { background: rgba(255, 255, 255, .18); }
.ikone.aktiv { color: var(--akzent); }
.ikone:disabled { opacity: .3; cursor: default; }
.ikone:disabled:hover { background: transparent; }

/* Die Ortsmarke ohne Auswahlmöglichkeit: bleibt sichtbar, gibt sich aber nicht
   als Knopf aus - kein Zeigefinger, keine Hervorhebung beim Überfahren. */
.ikone.zierde { cursor: default; }
.ikone.zierde:hover { background: transparent; }
.ikone.klein { width: 26px; height: 26px; }
.ikone.klein svg { width: 16px; height: 16px; }

.rundknopf {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.rundknopf svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.rundknopf .ikon-pause { display: none; }
.rundknopf.laeuft .ikon-play { display: none; }
.rundknopf.laeuft .ikon-pause { display: block; }
.rundknopf:hover { color: var(--akzent); }
.rundknopf:disabled { opacity: .3; cursor: default; }
.rundknopf:disabled:hover { color: inherit; }

/* Helles Erscheinungsbild: die Steuerleiste muss mitziehen, sonst steht ein
   dunkles Band unter einem hellen Archivstreifen. */
html[data-theme="light"] .leiste {
  background: linear-gradient(to top, rgba(250, 251, 253, .9), rgba(250, 251, 253, .4));
  color: var(--schleier-text);
  border-top: 1px solid var(--schleier-rand);
}

html[data-theme="light"] .kopf {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}

html[data-theme="light"] .fortschritt { background: rgba(0, 0, 0, .16); }
html[data-theme="light"] .ikone:hover { background: rgba(0, 0, 0, .09); }
html[data-theme="light"] .ort-gruppe { background: none; }

/* -- Ausklappbare Blätter ---------------------------------------------- */

.blatt {
  position: absolute;
  bottom: calc(var(--leiste-hoehe) + 8px);
  z-index: 7;
  background: var(--schleier);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--schleier-text);
  border: 1px solid var(--schleier-rand);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  padding: 5px;
  min-width: 200px;
  max-width: calc(100% - 24px);
  max-height: 60%;
  overflow-y: auto;
}

.blatt.menue { left: 12px; }
.blatt.kameras { left: 12px; }

.blatt-eintrag {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--schleier-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.blatt-eintrag:hover { background: rgba(128, 128, 128, .2); }
.blatt-eintrag:disabled, .blatt-eintrag:not([href]) { opacity: .35; cursor: default; }
.blatt-eintrag:disabled:hover, .blatt-eintrag:not([href]):hover { background: transparent; }
.blatt-eintrag.aktiv { color: var(--akzent); font-weight: 600; }
.blatt-eintrag small { display: block; opacity: .75; font-size: 11px; }

/* -- Archiv ------------------------------------------------------------ */

.archiv {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--leiste-hoehe);
  z-index: 6;
  background: var(--schleier);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--schleier-text);
  border-top: 1px solid var(--schleier-rand);
  padding: 9px 12px 11px;
}

.tagesleiste { display: flex; align-items: center; gap: 6px; }

.tage { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 auto; scrollbar-width: thin; }

.tag {
  flex: 0 0 auto;
  border: 1px solid var(--schleier-rand);
  background: transparent;
  color: var(--schleier-text);
  opacity: .72;
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}

.tag:hover { border-color: var(--akzent); opacity: 1; }
.tag.leer { opacity: .3; cursor: not-allowed; }
.tag.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; opacity: 1; font-weight: 600; }

.kalender {
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--text);
}

.kalender { color: var(--schleier-text); }
.kalender svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kalender input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.archiv .ikone { color: var(--schleier-text); }
.archiv .ikone:hover { background: rgba(128, 128, 128, .2); }

.stundenleiste {
  position: relative;
  margin-top: 8px;
  height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--schleier-rand);
  overflow: hidden;
}

.stunde-linie { position: absolute; top: 0; bottom: 14px; width: 1px; background: var(--schleier-rand); }

.stunde-text {
  position: absolute;
  bottom: 1px;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* Die 00 ganz links würde zur Hälfte aus der Leiste ragen. */
.stunde-text.am-rand-links { transform: none; left: 2px !important; }

/* Blasses Band über den Zeitraum, in dem es überhaupt Aufnahmen gibt. */
.abdeckung {
  position: absolute;
  top: 3px;
  height: 17px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--akzent) 22%, transparent);
  pointer-events: none;
}

.clip-marker {
  position: absolute;
  top: 4px;
  height: 15px;
  /* Maßstabsgetreu wäre ein 53-Sekunden-Clip auf einer Tagesachse 0,06 % breit
     - also weniger als ein Pixel und nicht zu treffen. Die Untergrenze steht
     deshalb in Pixeln und nicht in Prozent: sie muss unabhängig davon wirken,
     wie breit der Player gerade ist. */
  min-width: 7px;
  border-radius: 2px;
  background: var(--marker);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform .1s, background .1s;
}

.clip-marker:hover {
  background: var(--text-leise);
  transform: scaleX(1.6);
  z-index: 2;
}

.clip-marker.aktiv { background: var(--akzent); }
.clip-marker.aktiv::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid var(--akzent);
  border-radius: 4px;
}

.vorschau {
  position: absolute;
  bottom: 44px;
  transform: translateX(-50%);
  background: #000;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 3px;
  z-index: 8;
  pointer-events: none;
}

.vorschau img { display: block; width: 176px; height: 99px; object-fit: cover; border-radius: 5px; }
.vorschau span { display: block; text-align: center; font-size: 11px; color: var(--text-leise); }

/* Zeitraffermodus: ein abgeschlossener Tag ist ein einzelnes Video. Eine
   Stundenleiste mit Clipmarkern gibt es dann nicht mehr zu zeigen. */
html[data-ansicht="zeitraffer"] .stundenleiste { display: none; }
html[data-ansicht="zeitraffer"] .uhr { font-size: 15px; letter-spacing: .02em; }

/* -- Schlanke Steuerung ------------------------------------------------ */

html[data-controls="minimal"] #archivKnopf,
html[data-controls="minimal"] #menueKnopf,
html[data-controls="minimal"] .archiv { display: none; }

/* -- Schmale Rahmen ----------------------------------------------------
 *
 * Wie bei Feratel: die Ortsangabe rutscht in eine eigene transluzente Zeile
 * über die Leiste, damit in der Leiste selbst Platz für Uhrzeit und Knöpfe
 * bleibt. Ohne das drängen sich auf einem Handy fünf Elemente auf 360 px.
 */

/* -- Fingerbedienung ---------------------------------------------------
 *
 * 32 Pixel sind mit der Maus bequem und mit dem Daumen eine Zumutung; Apple
 * nennt 44 Punkte als Untergrenze, Google 48. Ausgelöst wird das über den
 * Zeigertyp, nicht über die Breite - ein Tablet ist breit und wird trotzdem
 * angetippt. Die Breitenregel steht nur daneben, damit sich das Ergebnis auch
 * am Rechner nachstellen lässt.
 */

@media (pointer: coarse), (max-width: 780px) {
  :root { --leiste-hoehe: 62px; }

  .ikone { width: 44px; height: 44px; }
  .ikone svg { width: 23px; height: 23px; }
  .ikone.klein { width: 36px; height: 36px; }
  .ikone.klein svg { width: 18px; height: 18px; }
  .rundknopf { width: 44px; height: 44px; }
  .rundknopf svg { width: 19px; height: 19px; }
  .uhr { font-size: 18px; }
  .tag { padding: 8px 13px; font-size: 13.5px; }
  .clip-marker { min-width: 10px; }
  .stundenleiste { height: 40px; }
  .blatt-eintrag { padding: 12px 14px; }
}

@media (max-width: 780px) {
  .ort-gruppe {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  }

  html[data-theme="light"] .ort-gruppe {
    background: linear-gradient(to top, rgba(250, 251, 253, .85), rgba(250, 251, 253, 0));
  }

  .verlauf { display: none; }
  .leiste-links, .leiste-rechts { gap: 4px; }
  .leiste-inhalt { padding: 0 8px; }
  .blatt { bottom: calc(var(--leiste-hoehe) + 54px); }
}

/* Am Handy zeigt das Archiv nur noch die Tage. Eine Stundenleiste über
   366 px verteilt 24 Stunden auf je 15 px - das trifft kein Daumen, und für
   den Sprung zwischen Clips gibt es die Pfeile neben der Uhrzeit. */
@media (max-width: 560px) {
  .stundenleiste { display: none; }
  .archiv { padding: 10px 10px 12px; }
  .tage { gap: 8px; }
}

@media (max-width: 420px) {
  .ort-name { font-size: 13px; }
  .vorschau img { width: 132px; height: 74px; }
  .leiste-inhalt { gap: 2px; padding: 0 4px; }
  .zeitblock { min-width: 66px; }
}

/* Unter 380 px wird es eng: sechs Ziele passen nicht mehr nebeneinander, ohne
   wieder zu schrumpfen. Der runde Knopf fliegt zuerst - ein Tippen aufs Bild
   tut dasselbe und ist das größere Ziel, das es gibt. */
@media (max-width: 379px) {
  #abspielen { display: none; }
}

/* Sehr flache Rahmen (Banner): die Kopfleiste würde nur stören. */
@media (max-height: 260px) {
  .kopf { display: none; }
  .ort-gruppe { position: static; padding: 0; background: none; }
}

/* -- Dialog ------------------------------------------------------------ */

.dialog {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  max-width: min(720px, 92vw);
  padding: 18px;
}

.dialog::backdrop { background: rgba(0, 0, 0, .6); }
.dialog h2 { margin: 0 0 8px; font-size: 17px; }
.dialog video { width: 100%; margin-top: 10px; border-radius: var(--radius); background: #000; }

.balken { height: 6px; border-radius: 3px; background: var(--rand); overflow: hidden; margin: 10px 0; }
.balken-gefuellt { height: 100%; width: 0; background: var(--akzent); transition: width .3s; }

.dialog menu { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0 0; padding: 0; }

.knopf {
  border: 0;
  background: var(--akzent);
  color: #fff;
  border-radius: 6px;
  padding: 8px 18px;
  font: inherit;
  cursor: pointer;
}

.tempo { font-size: 13px; color: var(--text-leise); }
.tempo select { font: inherit; margin-left: 6px; }