/**
 * Footer / Unterstreifen Styles
 */

:root {
  --unterstreifen-height: 40px;
}

body {
  padding-bottom: calc(var(--page-bottom-padding, 0px) + var(--unterstreifen-height) + env(safe-area-inset-bottom));
}

#unterstreifen {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: calc(var(--unterstreifen-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}

#unterstreifen a {
  text-align: center;
  padding: 8px 12px;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

.podcast-werbung {
  flex: 1;
  background: #ffb1d5;
  color: #b1ffdb;
}

.podcast-werbung:hover {
  background: #b1ffdb;
  color: #ffb1d5;
}

.rechtliches {
  flex: 0;
  white-space: nowrap;
  background: white;
  color: black;
}

.rechtliches:hover {
  background: black;
  color: white;
}

.newsletter {
  flex: 0;
  white-space: nowrap;
  background: #a7ffff;
  color: #ffa7a7;
}

.newsletter:hover {
  background: #ffa7a7;
  color: #a7ffff;
}