/* --- Teaser Box Small --- */
.teaser-small {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 34px 38px;
  border: 1px solid var(--color-black);
  border-radius: 30px;
  background: transparent;
  transition: background 0.2s;
  text-decoration: none;
  color: var(--color-black);
  cursor: pointer;
}

/* Leading nur an den Aussenkanten wegschneiden → optisches Padding = echte Werte,
   innerer Abstand bleibt natürlich (wie bei den Menü-Kacheln) */
.teaser-small > :first-child { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.teaser-small > :last-child  { text-box-trim: trim-end;   text-box-edge: cap alphabetic; }
.teaser-small > :only-child  { text-box-trim: trim-both; }

.teaser-small__title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: 28px;
  line-height: 1.2;
}

.teaser-small__text {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: 22px;
  line-height: 1.2;
}

/* Box hover: Hintergrund wechselt auf teaser-Farbe */
.teaser-small--green:hover  { background: var(--taldis-print-teaser); }
.teaser-small--blue:hover   { background: var(--taldis-project-teaser); }
.teaser-small--beige:hover  { background: var(--taldis-beige-teaser); }

/* Default: Farbbalken sichtbar, schwarze Linie weg */
.teaser-small--green  .read-more::after { opacity: 0; }
.teaser-small--green  .read-more        { box-shadow: inset 0 -14px 0 var(--taldis-print-hover); }

.teaser-small--blue   .read-more::after { opacity: 0; }
.teaser-small--blue   .read-more        { box-shadow: inset 0 -14px 0 var(--taldis-project-hover); }

.teaser-small--beige  .read-more::after { opacity: 0; }
.teaser-small--beige  .read-more        { box-shadow: inset 0 -14px 0 var(--taldis-beige-hover); }

/* Box hover: Farbbalken weg, schwarze Linie zurück */
.teaser-small--green:hover  .read-more::after { opacity: 1; }
.teaser-small--green:hover  .read-more        { box-shadow: none; }

.teaser-small--blue:hover   .read-more::after { opacity: 1; }
.teaser-small--blue:hover   .read-more        { box-shadow: none; }

.teaser-small--beige:hover  .read-more::after { opacity: 1; }
.teaser-small--beige:hover  .read-more        { box-shadow: none; }


/* --- Teaser Box Big --- */
.teaser-big {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 30px;
  border: 1px solid var(--color-black);
  border-radius: 30px;
  background: transparent;
  transition: background 0.2s;
  text-decoration: none;
  color: var(--color-black);
}

/* Leading nur an den Aussenkanten wegschneiden → optisches Padding = echte Werte */
.teaser-big > :first-child { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
.teaser-big > :last-child  { text-box-trim: trim-end;   text-box-edge: cap alphabetic; }
.teaser-big > :only-child  { text-box-trim: trim-both; }

.teaser-big__title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xl);
  line-height: 1.2;
}

.teaser-big__text {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: 32px;
  line-height: 1.2;
}

.teaser-big--green:hover  { background: var(--taldis-print-teaser); }
.teaser-big--blue:hover   { background: var(--taldis-project-teaser); }
.teaser-big--beige:hover  { background: var(--taldis-beige-teaser); }

/* Default: Button gefüllt */
.teaser-big--green .btn  { background: var(--color-green); border-color: var(--color-green); color: var(--color-white); }
.teaser-big--blue  .btn  { background: var(--color-blue);  border-color: var(--color-blue);  color: var(--color-white); }
.teaser-big--beige .btn  { background: var(--color-beige); border-color: var(--color-beige); color: var(--color-black); }

/* Box hover: Button zurück zu transparent */
.teaser-big--green:hover .btn  { background: transparent; border-color: var(--color-black); color: var(--color-black); }
.teaser-big--blue:hover  .btn  { background: transparent; border-color: var(--color-black); color: var(--color-black); }
.teaser-big--beige:hover .btn  { background: transparent; border-color: var(--color-black); color: var(--color-black); }