@property --btn-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 90deg;
}

/* ===== Buttons ===== */

.btn {
  font-family: 'Brother 1816 Printed', Arial, sans-serif;
  font-feature-settings: "salt" 1, "ss02" 1;
  font-weight: 500;
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  letter-spacing: -0.003em;
  line-height: 1.4705882353;
  text-align: center;
  text-decoration: none;
  color: var(--btn-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65em 1.2em 0.75em 1.2em;
  background-color: initial;
  border: clamp(2px, 0.3vw, 3px) solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  transition-property: background-color,color;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  cursor: pointer;
  align-self: start;
  margin-bottom: var(--mb-btn);
}
.btn:last-child {
  margin-bottom: 0;
}

.btn:hover {
  color: var(--btn-text-hover);
  background-color: var(--btn-bg-hover);
}

/* Aktiver Druck-Effekt */
.btn:active {
  transform: translateY(1px);
}

a.btn { 
  color: var(--btn-text); 
  text-decoration: none;
}
a.btn:hover { 
  color: var(--btn-text-hover); 
  text-decoration: none;
}

/* Disabled-Zustand für alle Button-Varianten */
.btn[disabled], .btn:disabled,
.btn.is-disabled {
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Button zentriert */
.btn--center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 650px) {
  .btn-mobile--center {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==== rote Buttons ==== */

.btn.btn-red {
  color: var(--white);
  background-color: var(--btn-red);
  border-color: var(--btn-red);
  transition-property: background-color;
}

.btn.btn-red:hover {
  color: var(--white);
  background-color: var(--btn-red-hover);
  border-color: var(--btn-red-hover);
}

.btn.btn-red:active {
  color: var(--white);
  background-color: var(--btn-red-active);
  border-color: var(--btn-red-active);
}

a.btn.btn-red { 
  color: var(--white); 
  text-decoration: none;
  background-color: var(--btn-red);
  border-color: var(--btn-red);
}
a.btn.btn-red:hover { 
  color: var(--white); 
  text-decoration: none;
  background-color: var(--btn-red-hover);
  border-color: var(--btn-red-hover);
}

/* ==== blaue Buttons ==== */

.btn.btn-blue {
  color: var(--white);
  background-color: var(--btn-blue);
  border-color: var(--btn-blue);
  transition-property: background-color;
}

.btn.btn-blue:hover {
  color: var(--white);
  background-color: var(--btn-blue-hover);
  border-color: var(--btn-blue-hover);
}

.btn.btn-blue:active {
  color: var(--white);
  background-color: var(--btn-blue-active);
  border-color: var(--btn-blue-active);
}

a.btn.btn-blue { 
  color: var(--white); 
  text-decoration: none;
  background-color: var(--btn-blue);
  border-color: var(--btn-blue);
}
a.btn.btn-blue:hover { 
  color: var(--white); 
  text-decoration: none;
  background-color: var(--btn-blue-hover);
  border-color: var(--btn-blue-hover);
}

/* ==== Buttons in .section-red ==== */

.section-red .btn {
  border-color: var(--white);
  color: var(--white);
}

.section-red .btn:hover {
  color: var(--red-dark);
  background-color: var(--white);
  border-color: var(--white);
}

.section-red a.btn { 
  color: var(--white); 
  text-decoration: none;
}
.section-red a.btn:hover { 
  color: var(--red-dark); 
  text-decoration: none;
}

/* ==== Buttons in .section-blue ==== */

.section-blue .btn {
  border-color: var(--white);
  color: var(--white);
}

.section-blue .btn:hover {
  color: var(--text-blue);
  background-color: var(--white);
  border-color: var(--white);
}

.section-blue a.btn { 
  color: var(--white); 
  text-decoration: none;
}
.section-blue a.btn:hover { 
  color: var(--text-blue); 
  text-decoration: none;
}

/* ==== Buttons in .section-green ==== */

.section-green .btn {
  border-color: var(--white);
  color: var(--white);
}

.section-green .btn:hover {
  color: var(--green-dark);
  background-color: var(--white);
  border-color: var(--white);
}

.section-green a.btn { 
  color: var(--white); 
  text-decoration: none;
}
.section-green a.btn:hover { 
  color: var(--green-dark); 
  text-decoration: none;
}

/* ==== Buttons in .section-violet ==== */

.section-violet .btn {
  border-color: var(--white);
  color: var(--white);
}

.section-violet .btn:hover {
  color: var(--violet);
  background-color: var(--white);
  border-color: var(--white);
}

.section-violet a.btn { 
  color: var(--white); 
  text-decoration: none;
}
.section-violet a.btn:hover { 
  color: var(--violet); 
  text-decoration: none;
}

/* ==== Buttons in .section-turquoise ==== */

.section-turquoise .btn {
  border-color: var(--white);
  color: var(--white);
}

.section-turquoise .btn:hover {
  color: var(--turquoise);
  background-color: var(--white);
  border-color: var(--white);
}

.section-turquoise a.btn { 
  color: var(--white); 
  text-decoration: none;
}

.section-turquoise a.btn:hover { 
  color: var(--turquoise); 
  text-decoration: none;
}

/* ==== Buttons in .section-yellow ==== */

.section-yellow .btn {
  border-color: var(--black);
  color: var(--black);
}

.section-yellow .btn:hover {
  color: var(--yellow);
  background-color: var(--black);
  border-color: var(--black);
}
.section-yellow a.btn { 
  color: var(--black); 
  text-decoration: none;
}

.section-yellow a.btn:hover { 
  color: var(--yellow); 
  text-decoration: none;
}

/* ==== Buttons in .section-orange ==== */

.section-orange .btn {
  border-color: var(--black);
  color: var(--black);
}

.section-orange .btn:hover {
  color: var(--orange-light);
  background-color: var(--black);
  border-color: var(--black);
}

.section-orange a.btn { 
  color: var(--black); 
  text-decoration: none;
}

.section-orange a.btn:hover { 
  color: var(--orange-light); 
  text-decoration: none;
}

/* ===== Pills ===== */

.pill {
  font-size: clamp(0.5rem, 2.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  max-width: 40rem;
}

.pill-list {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(0.6rem, 2.9vw, 1.2rem);
  letter-spacing: -0.003em;
  line-height: 1.4705882353;
}

.pill-list li {
  position: relative;
  z-index: 0;
  color: var(--pill-text);
  padding: .2em .75em .37em .75em;
  border-style: solid;
  border-color: var(--pill-border);
  border-width: clamp(1px, 0.3vw, 2px);
  border-radius: var(--pill-border-radius);
  box-shadow: var(--card-shadow, none);
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
}

/* Hintergrund-Layer */
.pill-list li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--pill-bg);
  opacity: 0.8;
  border-radius: inherit;
  pointer-events: none;
}