/*
 * Wiederkehrende Bausteine der Sticker-Optik: Pills, Chips, Karten, CTAs.
 * Im Design-Prototyp waren diese Muster inline dupliziert.
 */

/* --- Mono-Label ---------------------------------------------------------- */

.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* --- Chips (rotierte Label-Pillen) --------------------------------------- */

.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  background: var(--white);
  color: var(--ink);
}

.chip--green {
  background: var(--green-chip);
  color: var(--ink-deep);
}

.chip--outlined {
  border: 2px solid var(--ink);
}

.chip--hero {
  font-size: 12px;
  letter-spacing: 0.3em;
  padding: 9px 18px;
  background: var(--green-chip);
  color: var(--ink-deep);
}

/* --- Pills (Links im Sticker-Look) --------------------------------------- */

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: #ffffffcc;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  box-shadow: var(--shadow-hard-sm);
}

.pill--white {
  background: var(--white);
}

.pill--link {
  letter-spacing: 0.14em;
  transition: background 0.2s;
}

.pill--link:hover {
  background: var(--green);
  color: var(--ink);
}

/* --- CTA-Buttons ---------------------------------------------------------- */

.cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 17px 26px;
  transition: background 0.2s, color 0.2s;
}

.cta--dark {
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-hard-cta);
}

.cta--dark:hover {
  background: var(--green);
  color: var(--ink-deep);
}

/* Auf grünem Untergrund wird der Hover weiß statt grün. */
.cta--dark-on-green:hover {
  background: var(--white);
  color: var(--ink);
}

.cta--outline {
  background: var(--white);
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: 15px 24px;
  box-shadow: var(--shadow-hard-sm);
}

.cta--outline:hover {
  background: var(--green);
  color: var(--ink-deep);
}

.cta--green {
  background: var(--green);
  color: var(--ink-deep);
  box-shadow: var(--shadow-hard-cta);
}

.cta--green:hover {
  background: var(--ink);
  color: var(--white);
}

.cta--wide {
  font-size: 13px;
  letter-spacing: 0.16em;
  padding: 18px 30px;
}

.cta--small {
  font-weight: 400;
  font-size: 12px;
  padding: 13px 20px;
}

/* --- Karten (Sticker) ----------------------------------------------------- */

.card {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
  padding: 28px;
}

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

.placeholder {
  background: var(--stripes);
  border: 2px dashed #cfccc0;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.placeholder__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted-3);
  text-align: center;
  padding: 0 14px;
}